@anker-in/headless-ui 1.1.0 → 1.1.1
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/Evaluate/index.js +1 -1
- package/dist/cjs/biz-components/Evaluate/index.js.map +2 -2
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/cjs/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js +4 -4
- package/dist/cjs/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/cjs/biz-components/Specs/index.js +1 -1
- package/dist/cjs/biz-components/Specs/index.js.map +3 -3
- package/dist/cjs/biz-components/TextModal/index.js +1 -1
- package/dist/cjs/biz-components/TextModal/index.js.map +2 -2
- package/dist/cjs/stories/graphic.stories.d.ts +1 -0
- package/dist/cjs/types/props.d.ts +1 -0
- package/dist/cjs/types/props.js +1 -1
- package/dist/cjs/types/props.js.map +1 -1
- package/dist/esm/biz-components/Evaluate/index.js +1 -1
- package/dist/esm/biz-components/Evaluate/index.js.map +2 -2
- package/dist/esm/biz-components/MediaPlayerSticky/index.js +1 -1
- package/dist/esm/biz-components/MediaPlayerSticky/index.js.map +3 -3
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js +5 -5
- package/dist/esm/biz-components/ShelfDisplay/shelfDisplayItem.js.map +3 -3
- package/dist/esm/biz-components/Specs/index.js +1 -1
- package/dist/esm/biz-components/Specs/index.js.map +3 -3
- package/dist/esm/biz-components/TextModal/index.js +1 -1
- package/dist/esm/biz-components/TextModal/index.js.map +2 -2
- package/dist/esm/stories/graphic.stories.d.ts +1 -0
- package/dist/esm/types/props.d.ts +1 -0
- package/dist/tokens/base.css +7 -3
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Specs/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n const { data, buildData, onChange } = page || {}\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us' } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n return (\n <div className=\"box-border specs-sku-node-wrap\">\n <Text\n className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n title={active?.[index]?.name}\n >\n {active?.[index]?.name || ''}\n </div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n <DropDown\n index={index}\n list={buildData?.products}\n active={active}\n filterActive={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n {findSku?.availableForSale ? (\n <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n {basePrice && (\n <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n {basePrice}\n </div>\n )}\n </div>\n ) : (\n false\n )}\n {DefaultSelectMenu?.buttonText ? (\n <Button onClick={() => onChange?.(product)} className=\"specs-sku-node-button\">\n {DefaultSelectMenu?.buttonText}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (!v) return\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n />\n <div\n className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`box-border grid w-full cursor-pointer grid-cols-3 border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n >\n {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n <div\n className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n })}\n </div>\n </div>\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n let currentActive = {}\n skus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name,\n handle: findData?.handle,\n },\n }\n }\n })\n setActive(currentActive)\n }, [buildData])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
6
|
-
"names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "Specs", "React", "page", "ref", "data", "buildData", "onChange", "isMobile", "active", "setActive", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport DropDown from './dropdown'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport { useMemo, useState, useEffect } from 'react'\nimport { withLayout } from '../../shared/Styles.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport { Picture, Text, Button, Container, Heading } from '../../components/index.js'\nimport React, { useImperativeHandle, useRef } from 'react'\n\nconst Specs = React.forwardRef<HTMLDivElement, any>((page: any, ref) => {\n const { data, buildData, onChange } = page || {}\n\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const [active, setActive] = useState<any>({})\n const [visibleActive, setVisibleActive] = useState<{ [key: number]: boolean }>({})\n\n const innerRef = useRef<HTMLDivElement>(null)\n\n const { locale = 'us' } = useAiuiContext()\n\n const { LeftMenu, RightMenu, DefaultSelectMenu } = useMemo(() => data?.data || {}, [data?.data])\n\n const isImageUrl = (urlPath: string) => {\n try {\n const url = new URL(urlPath)\n const path = url.pathname.toLowerCase()\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(path)\n } catch (e) {\n // \u5982\u679C\u4F20\u5165\u7684\u4E0D\u662F\u6709\u6548URL\uFF08\u5982\u76F8\u5BF9\u8DEF\u5F84\uFF09\uFF0C\u76F4\u63A5\u68C0\u67E5\u8DEF\u5F84\n return /\\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(urlPath)\n }\n }\n\n const skuNode = (product: any, index: number) => {\n const findCurrentData = RightMenu?.menus?.find?.((item: any) => item?.handle === product?.handle)\n const findSku = product?.variants?.find?.((item: any) => item?.sku === product?.sku || findCurrentData?.sku)\n const coupon = findSku?.coupons?.[0]\n const { price, basePrice } = formatVariantPrice({\n locale: locale || 'us',\n amount: coupon ? coupon?.variant_price4wscode : findSku?.price,\n baseAmount: coupon ? findSku?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n const buttonTextValue =\n typeof DefaultSelectMenu?.buttonText === 'string'\n ? DefaultSelectMenu?.buttonText\n : DefaultSelectMenu?.buttonText?.[String(index)] || ''\n return (\n <div className=\"box-border specs-sku-node-wrap\">\n <Text\n className={`relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text`}\n onClick={() => setVisibleActive({ ...visibleActive, [index]: !visibleActive?.[index] })}\n >\n <div className=\"flex items-center justify-between overflow-hidden\">\n <div\n className=\"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title\"\n title={active?.[index]?.name}\n >\n {active?.[index]?.name || ''}\n </div>\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n className=\"openDropDown\"\n >\n <path\n d=\"M6 9.5L12 15.5L18 9.5\"\n stroke=\"#1D1D1F\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n <DropDown\n index={index}\n list={buildData?.products}\n active={active}\n filterActive={active}\n setActive={setActive}\n visible={visibleActive}\n setVisible={setVisibleActive}\n />\n </Text>\n <div className=\"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]\">\n <Picture\n source={findSku?.image?.url || ''}\n className=\"aspect-h-[280] aspect-w-[280]\"\n imgClassName=\"w-full h-full object-cover hover:scale-105 transition-all duration-300\"\n />\n </div>\n {findSku?.availableForSale ? (\n <div className=\"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl\">\n <div className=\"text-[#1D1D1F] specs-sku-node-price\">{price || ''}</div>\n {basePrice && (\n <div className=\"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price\">\n {basePrice}\n </div>\n )}\n </div>\n ) : (\n false\n )}\n {buttonTextValue ? (\n <Button\n onClick={() => {\n onChange?.(product, index)\n }}\n className=\"specs-sku-node-button\"\n >\n {buttonTextValue}\n </Button>\n ) : null}\n </div>\n )\n }\n\n const normalNode = (v: any) => {\n if (!v) return\n if (v && typeof v !== 'string') {\n return (\n <div className=\"size-full\">\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v?.text || '',\n }}\n />\n <Picture\n source={v?.imgUrl}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n )\n }\n return (\n <div className=\"break-all\">\n {isImageUrl(v) ? (\n <Picture\n source={v}\n className=\"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]\"\n imgClassName=\"w-full h-full object-cover\"\n />\n ) : (\n <p\n className=\"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text\"\n dangerouslySetInnerHTML={{\n __html: v || '',\n }}\n />\n )}\n </div>\n )\n }\n\n const productNode = (data: any) => {\n return data.map((st: any, idx: number) => {\n const isFirstParameter = idx === 0\n return (\n <div\n key={st}\n className={`box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col ${isFirstParameter ? '' : ''} specs-product-node-wrap`}\n >\n <Heading\n as=\"h3\"\n html={st || ''}\n className=\"mr-4 flex-1 pt-4 tablet:py-6 text-base font-bold md:text-sm l-tablet:text-[#86868C] desktop:p-6 lg-desktop:text-lg specs-product-node-title\"\n />\n <div\n className={`col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body`}\n >\n {Object.keys(active)?.map?.((item: string) => {\n const currentData = active?.[item]\n const currentMenus = RightMenu?.menus?.find?.(\n (item: any) => item?.handle === currentData?.handle\n )?.subTitle\n return normalNode(currentMenus?.[st])\n })}\n </div>\n </div>\n )\n })\n }\n\n // \u5DE6\u4FA7\u6807\u9898\u83DC\u5355\n const childrenNode = (node: any) => {\n if (!active) return\n const { subTitle, isProduct } = node\n // \u5982\u679C\u662F\u4EA7\u54C1\n if (isProduct) {\n return (\n <>\n <div\n className={`box-border grid w-full cursor-pointer grid-cols-3 border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col border-t-0 specs-content-item-product`}\n >\n {node?.title && <Heading as=\"h3\" html={node?.title || ''} className=\"l:hidden specs-item-product-title\" />}\n <div\n className={`col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body`}\n >\n {Object.keys(active)?.map((item: string, index: number) => {\n const currentData = active?.[item]\n const currentProduct = buildData?.products?.find?.((item: any) => item?.handle === currentData?.handle)\n return <div key={item}>{skuNode({ ...currentProduct, sku: currentData?.sku, item: item }, index)}</div>\n })}\n </div>\n </div>\n {subTitle?.length ? productNode(subTitle) : null}\n </>\n )\n }\n return productNode(subTitle)\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useEffect(() => {\n if (!buildData?.products?.length) return\n const skus = DefaultSelectMenu?.sku?.split?.(',') || []\n let currentActive = {}\n skus?.forEach?.((sku: string, index: number) => {\n const findData = buildData?.products?.find?.((item: any) => {\n const findSku = item?.variants?.find?.((v: any) => v?.sku === sku)\n if (findSku) return true\n })\n if (findData) {\n currentActive = {\n ...currentActive,\n [index]: {\n sku: sku,\n name: findData?.name,\n handle: findData?.handle,\n },\n }\n }\n })\n setActive(currentActive)\n }, [buildData])\n\n useEffect(() => {\n if (isMobile) {\n const currentActive = Object.keys(active || {})\n if (currentActive?.length > 2) {\n const newActive = currentActive?.slice?.(0, 2)\n let newShowActive = {}\n newActive?.forEach?.((item: string) => {\n newShowActive = { ...newShowActive, [item]: active?.[item] }\n })\n setActive(newShowActive)\n }\n }\n }, [isMobile])\n\n return (\n <div className=\"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper\" ref={innerRef}>\n {LeftMenu?.data ? (\n <div className=\"box-border w-full overflow-hidden specs-wrapper-content\">\n {LeftMenu?.data?.map?.((item: any, index: number) => {\n return (\n <div key={index} className=\"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item\">\n {childrenNode(item)}\n </div>\n )\n })}\n </div>\n ) : null}\n </div>\n )\n})\n\nSpecs.displayName = 'Specs'\n\nexport default withLayout(Specs)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Specs_exports", "__export", "Specs_default", "__toCommonJS", "import_jsx_runtime", "import_dropdown", "import_AiuiProvider", "import_react_responsive", "import_react", "import_Styles", "import_shelfDisplay", "import_components", "Specs", "React", "page", "ref", "data", "buildData", "onChange", "isMobile", "active", "setActive", "visibleActive", "setVisibleActive", "innerRef", "locale", "LeftMenu", "RightMenu", "DefaultSelectMenu", "isImageUrl", "urlPath", "path", "skuNode", "product", "index", "findCurrentData", "item", "findSku", "coupon", "price", "basePrice", "buttonTextValue", "DropDown", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)d(o,l,{get:e[l],enumerable:!0})},g=(o,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!r.call(o,s)&&s!==l&&d(o,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return o};var c=o=>g(d({},"__esModule",{value:!0}),o);var f={};b(f,{TextModal:()=>n});module.exports=c(f);var t=require("react/jsx-runtime"),x=require("../../components/dialog.js"),a=require("../../components/index.js"),u=require("../../helpers/index.js");const n=o=>{const{textVisible:e,extension:l,onCloseModal:i}=o;return(0,t.jsx)(x.Dialog,{open:e,onOpenChange:()=>i(),children:(0,t.jsx)(x.DialogContent,{className:"z-[
|
|
1
|
+
"use strict";var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var r=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)d(o,l,{get:e[l],enumerable:!0})},g=(o,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of p(e))!r.call(o,s)&&s!==l&&d(o,s,{get:()=>e[s],enumerable:!(i=m(e,s))||i.enumerable});return o};var c=o=>g(d({},"__esModule",{value:!0}),o);var f={};b(f,{TextModal:()=>n});module.exports=c(f);var t=require("react/jsx-runtime"),x=require("../../components/dialog.js"),a=require("../../components/index.js"),u=require("../../helpers/index.js");const n=o=>{const{textVisible:e,extension:l,onCloseModal:i}=o;return(0,t.jsx)(x.Dialog,{open:e,onOpenChange:()=>i(),children:(0,t.jsx)(x.DialogContent,{className:"z-[9999] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden",children:(0,t.jsxs)("div",{className:"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col",children:[(0,t.jsx)("div",{className:"min-h-[260px] w-full md-tablet:flex-1",children:(0,t.jsx)(a.Picture,{source:`${l?.textPcImg?.url||""} , ${l?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),(0,t.jsx)("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:(0,t.jsx)(a.Text,{html:l?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),(0,t.jsx)("div",{onClick:()=>i(),className:"absolute right-4 top-4 cursor-pointer",children:(0,t.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:(0,t.jsx)("g",{"clip-path":"url(#clip0_2548_10038)",children:(0,t.jsx)("path",{d:"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z",fill:"white"})})})}),(0,t.jsxs)("div",{className:"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto",children:[(0,t.jsx)(a.Text,{html:l?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),(0,t.jsx)("br",{}),(0,t.jsx)(a.Text,{html:l?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/TextModal/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"z-[
|
|
5
|
-
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GA0BY,IAAAI,EAAA,6BAzBZC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAenB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,SACE,OAAC,UAAO,KAAMC,EAAa,aAAc,IAAME,EAAa,EAC1D,mBAAC,iBAAc,UAAU,
|
|
4
|
+
"sourcesContent": ["import type { Media } from '../../types/props.js'\nimport { Dialog, DialogContent } from '../../components/dialog.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport type { Img } from '../../types/props.js'\n\nexport type TextModalType = {\n textVisible: boolean\n extension?: {\n textPcImg: Img\n textMobileImg: Img\n textTitle: string\n text: string\n textDesc: string\n }\n onCloseModal: () => void\n}\n\nconst TextModal = (props: TextModalType) => {\n const { textVisible, extension, onCloseModal } = props\n\n return (\n <Dialog open={textVisible} onOpenChange={() => onCloseModal()}>\n <DialogContent className=\"z-[9999] tablet:max-w-[896px] md-tablet:h-[490px] md-tablet:w-[358px] tablet:rounded-2xl mx-auto rounded-lg border-none bg-white p-0 [&_button]:hidden\">\n <div className=\"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col\">\n <div className=\"min-h-[260px] w-full md-tablet:flex-1\">\n <Picture\n source={`${extension?.textPcImg?.url || ''} , ${extension?.textMobileImg?.url || ''} 767`}\n className=\"size-full\"\n imgClassName=\"w-full h-full object-cover\"\n />\n </div>\n <div className=\"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4\">\n <Text html={extension?.textTitle} className=\"tablet:text-[24px] text-[20px] font-bold leading-[1.2]\" />\n </div>\n <div onClick={() => onCloseModal()} className=\"absolute right-4 top-4 cursor-pointer\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\">\n <g clip-path=\"url(#clip0_2548_10038)\">\n <path\n d=\"M5.63545 6.13604C6.02592 5.74546 6.65913 5.74551 7.04966 6.13604L11.9994 11.0858L16.9492 6.13604C17.3397 5.74552 17.9729 5.74546 18.3634 6.13604C18.7538 6.52659 18.7538 7.15972 18.3634 7.55025L13.4136 12.5L18.3634 17.4497C18.7538 17.8403 18.7538 18.4734 18.3634 18.864C17.9729 19.2545 17.3397 19.2545 16.9492 18.864L11.9994 13.9142L7.04966 18.864C6.65913 19.2545 6.02592 19.2545 5.63545 18.864C5.24501 18.4734 5.24502 17.8403 5.63545 17.4497L10.5852 12.5L5.63545 7.55025C5.24502 7.15972 5.24501 6.52658 5.63545 6.13604Z\"\n fill=\"white\"\n />\n </g>\n </svg>\n </div>\n <div className=\"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto\">\n <Text html={extension?.text} className=\" tablet:text-2xl text-xl font-bold leading-[1.2]\" />\n <br />\n <Text html={extension?.textDesc} className=\"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]\" />\n </div>\n </div>\n </DialogContent>\n </Dialog>\n )\n}\n\nexport { TextModal }\n"],
|
|
5
|
+
"mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,eAAAE,IAAA,eAAAC,EAAAH,GA0BY,IAAAI,EAAA,6BAzBZC,EAAsC,sCACtCC,EAA8B,qCAC9BC,EAAmB,kCAenB,MAAML,EAAaM,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,SACE,OAAC,UAAO,KAAMC,EAAa,aAAc,IAAME,EAAa,EAC1D,mBAAC,iBAAc,UAAU,yJACvB,oBAAC,OAAI,UAAU,kFACb,oBAAC,OAAI,UAAU,wCACb,mBAAC,WACC,OAAQ,GAAGD,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,KACA,OAAC,OAAI,UAAU,yDACb,mBAAC,QAAK,KAAMA,GAAW,UAAW,UAAU,yDAAyD,EACvG,KACA,OAAC,OAAI,QAAS,IAAMC,EAAa,EAAG,UAAU,wCAC5C,mBAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,mBAAC,KAAE,YAAU,yBACX,mBAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,KACA,QAAC,OAAI,UAAU,iFACb,oBAAC,QAAK,KAAMD,GAAW,KAAM,UAAU,mDAAmD,KAC1F,OAAC,OAAG,KACJ,OAAC,QAAK,KAAMA,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
|
|
6
6
|
"names": ["TextModal_exports", "__export", "TextModal", "__toCommonJS", "import_jsx_runtime", "import_dialog", "import_components", "import_helpers", "props", "textVisible", "extension", "onCloseModal"]
|
|
7
7
|
}
|
package/dist/cjs/types/props.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=Object.defineProperty;var a=Object.getOwnPropertyDescriptor;var i=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var s=(t,e,o,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of i(e))!g.call(t,p)&&p!==o&&n(t,p,{get:()=>e[p],enumerable:!(r=a(e,p))||r.enumerable});return t};var m=t=>s(n({},"__esModule",{value:!0}),t);var l={};module.exports=m(l);
|
|
2
2
|
//# sourceMappingURL=props.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/types/props.ts"],
|
|
4
|
-
"sourcesContent": ["export interface ComponentCommonProps {\n style?: string\n event?: any\n condition?: any\n className?: string\n id?: string\n key?: string\n}\n\nexport type ContainerProps = {\n containerMode?: Mode\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\n\nexport type Img = {\n url: string\n alt?: string\n}\n\nexport type Video = {\n url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n\nexport type Media = {\n alt: string\n url: string\n thumbnailURL: string\n mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp'\n width?: number\n height?: number\n focalX?: number\n focalY?: number\n}\n\nexport type GSAPContext = {\n gsap?: any\n ScrollTrigger?: any\n SplitText?: any\n}\n"],
|
|
4
|
+
"sourcesContent": ["export interface ComponentCommonProps {\n wrapperClassName?: string\n style?: string\n event?: any\n condition?: any\n className?: string\n id?: string\n key?: string\n}\n\nexport type ContainerProps = {\n containerMode?: Mode\n spaceY?: SpaceY\n spaceTop?: SpaceTop\n spaceBottom?: SpaceBottom\n}\n\nexport type Mode = 'section' | 'fragment'\n\nexport type SpaceY = 'default' | 'none' | string\nexport type SpaceTop = 'default' | 'none' | string\nexport type SpaceBottom = 'default' | 'none' | string\n\nexport type Img = {\n url: string\n alt?: string\n}\n\nexport type Video = {\n url: string\n}\n\nexport type Theme = 'light' | 'dark'\nexport type Shape = 'rounded' | 'square'\nexport type Align = 'left' | 'center' | 'right'\n\nexport type Media = {\n alt: string\n url: string\n thumbnailURL: string\n mimeType: 'video/mp4' | 'image/jpeg' | 'image/png' | 'image/webp'\n width?: number\n height?: number\n focalX?: number\n focalY?: number\n}\n\nexport type GSAPContext = {\n gsap?: any\n ScrollTrigger?: any\n SplitText?: any\n}\n"],
|
|
5
5
|
"mappings": "+WAAA,IAAAA,EAAA,kBAAAC,EAAAD",
|
|
6
6
|
"names": ["props_exports", "__toCommonJS"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as
|
|
1
|
+
"use client";import{jsx as t,jsxs as i}from"react/jsx-runtime";import x,{useImperativeHandle as w,useRef as v}from"react";import h from"../Title/index.js";import{cn as a}from"../../helpers/utils.js";import b from"../../components/picture.js";import g from"../SwiperBox/index.js";import{withLayout as k}from"../../shared/Styles.js";import{Avatar as N,AvatarImage as y,AvatarFallback as C}from"../../components/avatar.js";import{Container as L}from"../../components/container.js";import{Text as T}from"../../components/text.js";import{useExposure as E}from"../../hooks/useExposure.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const p="copy",m="product_review",P=({data:e,configuration:r})=>{const n=v(null),d=o=>{const s=Number(o),l=Number.isFinite(s)?Math.max(0,Math.floor(s)):0;return Array.from({length:l})||[]};return E(n,{componentType:p,componentName:m,componentTitle:e?.title,componentDescription:e?.description,position:r?.index+1}),t("div",{ref:n,className:a("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300",r?.shape==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px]"),children:i("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4",children:[i("div",{className:a("lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between"),children:[i("div",{className:"flex-1",children:[e?.title?t("h4",{className:"laptop:text-lg text-sm font-bold",children:e?.title}):null,t("div",{className:"mt-1 flex items-center",children:d(e?.rating)?.map?.((o,s)=>t("div",{className:"mr-1",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 16 16",fill:"none",children:t("path",{d:"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z",fill:"#F77234"})})},s))})]}),t("div",{className:"desktop:size-12 size-10 overflow-hidden",children:e?.avatar?.url?i(N,{className:"size-full",isAdaptation:!e?.avatar?.url,children:[t(y,{src:e?.avatar?.url}),t(C,{children:e?.title})]}):null})]}),t("div",{className:"flex-1",children:t(T,{className:a("lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2] evaluate-description"),children:e?.description||""})}),t("a",{href:M(e?.link,`${p}_${m}`),onClick:()=>{r?.event?.primaryButton(e,r?.index+1)},"data-headless-type-name":`${p}#${m}`,"data-headless-title-desc-button":`${e?.title}#${e?.description||e?.subTitle}`,"data-headless-nav-postion":`''#${r?.index+1}`,children:i("div",{className:a("mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3",r?.shape==="round"?"rounded-lg":"rounded-none"),children:[t("div",{className:"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center",children:t(b,{className:"w-full object-cover",source:e?.img?.url,alt:e?.img?.alt||""})}),t("p",{className:"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]",children:e?.subTitle||""})]})})]})})},B=x.forwardRef(({className:e="",data:r,key:n,...d},o)=>{const{products:s,title:l,theme:f,...u}=r,c=v(null);return w(o,()=>c.current),t("div",{className:e,ref:c,children:t("div",{className:"evaluate-box relative z-10",children:t(L,{...r?.containerProps||{},className:"overflow-hidden",children:i("div",{ref:o,className:a("w-full",e,{"aiui-dark":f==="dark"}),children:[l&&t(h,{data:{title:l}}),t(g,{className:"!overflow-visible",id:"Evaluate"+n,data:{list:s,configuration:{...u,title:l}},Slide:P,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.2},768:{spaceBetween:16,freeMode:!1,slidesPerView:2.3},1024:{spaceBetween:16,freeMode:!1,slidesPerView:3},1440:{spaceBetween:16,freeMode:!1,slidesPerView:4}}})]})})})})});var S=k(B);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/Evaluate/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleRating = (num: number) => {\n const raw = Number(num)\n const count = Number.isFinite(raw) ? Math.max(0, Math.floor(raw)) : 0\n return Array.from({ length: count }) || []\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px]'\n )}\n >\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n {data?.avatar?.url ? (\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n ) : null}\n </div>\n </div>\n <div className=\"flex-1\">\n <Text\n className={cn(\n '
|
|
5
|
-
"mappings": "aA8EU,OACiB,OAAAA,EADjB,QAAAC,MAAA,oBA7EV,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QACnD,OAAOC,MAAW,oBAClB,OAAS,MAAAC,MAAU,yBACnB,OAAOC,MAAa,8BACpB,OAAOC,MAAe,wBACtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,UAAAC,EAAQ,eAAAC,EAAa,kBAAAC,MAAsB,6BACpD,OAAS,aAAAC,MAAiB,gCAC1B,OAAS,QAAAC,MAAY,2BAErB,OAAS,eAAAC,MAAmB,6BAC5B,OAAS,eAAAC,MAAmB,8BAG5B,MAAMC,EAAgB,OAChBC,EAAgB,iBAiChBC,EAAe,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAmD,CAC7F,MAAMC,EAAMlB,EAAuB,IAAI,EACjCmB,EAAgBC,GAAgB,CACpC,MAAMC,EAAM,OAAOD,CAAG,EAChBE,EAAQ,OAAO,SAASD,CAAG,EAAI,KAAK,IAAI,EAAG,KAAK,MAAMA,CAAG,CAAC,EAAI,EACpE,OAAO,MAAM,KAAK,CAAE,OAAQC,CAAM,CAAC,GAAK,CAAC,CAC3C,EAEA,OAAAX,EAAYO,EAAK,CACf,cAAAL,EACA,cAAAC,EACA,eAAgBE,GAAM,MACtB,qBAAsBA,GAAM,YAC5B,SAAUC,GAAe,MAAQ,CACnC,CAAC,EAGCrB,EAAC,OACC,IAAKsB,EACL,UAAWhB,EACT,qGACAe,GAAe,QAAU,QAAU,cAAgB,eACnD,oGACA,qFACA,qBACF,EAEA,SAAApB,EAAC,OAAI,UAAU,4EACb,UAAAA,EAAC,OAAI,UAAWK,EAAG,iEAAiE,EAClF,UAAAL,EAAC,OAAI,UAAU,SACZ,UAAAmB,GAAM,MAAQpB,EAAC,MAAG,UAAU,mCAAoC,SAAAoB,GAAM,MAAM,EAAQ,KACrFpB,EAAC,OAAI,UAAU,yBACZ,SAAAuB,EAAaH,GAAM,MAAM,GAAG,MAAM,CAACO,EAAGC,IAEnC5B,EAAC,OAAgB,UAAU,OACzB,SAAAA,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,QACC,EAAE,6oBACF,KAAK,UACP,EACF,GANQ4B,CAOV,CAEH,EACH,GACF,EACA5B,EAAC,OAAI,UAAU,0CACZ,SAAAoB,GAAM,QAAQ,IACbnB,EAACS,EAAA,CAAO,UAAU,YAAY,aAAc,CAACU,GAAM,QAAQ,IACzD,UAAApB,EAACW,EAAA,CAAY,IAAKS,GAAM,QAAQ,IAAK,EACrCpB,EAACY,EAAA,CAAgB,SAAAQ,GAAM,MAAM,GAC/B,EACE,KACN,GACF,EACApB,EAAC,OAAI,UAAU,SACb,SAAAA,EAACc,EAAA,CACC,UAAWR,EACT,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport Title from '../Title/index.js'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Avatar, AvatarImage, AvatarFallback } from '../../components/avatar.js'\nimport { Container } from '../../components/container.js'\nimport { Text } from '../../components/text.js'\nimport type { ContainerProps, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Img } from '../../types/props.js'\n\nconst componentType = 'copy'\nconst componentName = 'product_review'\n\nexport interface EvaluateItem {\n /** \u4EA7\u54C1\u56FE\u7247*/\n img: Img\n title: string\n subTitle: string\n description: string\n avatar?: {\n url: string\n }\n rating: number\n link?: string\n}\n\nexport interface EvaluateProps {\n className?: string\n data: {\n title?: string\n products: EvaluateItem[]\n /** \u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u4E3B\u9898\u8272*/\n theme?: Theme\n containerProps?: ContainerProps\n }\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: (v: any, index: number) => void\n }\n key?: string\n}\n\nconst EvaluateItem = ({ data, configuration }: { data: EvaluateItem; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleRating = (num: number) => {\n const raw = Number(num)\n const count = Number.isFinite(raw) ? Math.max(0, Math.floor(raw)) : 0\n return Array.from({ length: count }) || []\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full overflow-hidden duration-300',\n configuration?.shape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]',\n 'laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative',\n 'md-tablet:h-[360px]'\n )}\n >\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col overflow-hidden p-4\">\n <div className={cn('lg-desktop:mb-16 desktop:mb-10 mb-8 flex w-full justify-between')}>\n <div className=\"flex-1\">\n {data?.title ? <h4 className=\"laptop:text-lg text-sm font-bold\">{data?.title}</h4> : null}\n <div className=\"mt-1 flex items-center\">\n {handleRating(data?.rating)?.map?.((_, index) => {\n return (\n <div key={index} className=\"mr-1\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\n <path\n d=\"M7.32745 1.36274C7.60256 0.805304 8.39744 0.805305 8.67255 1.36274L10.1766 4.41035C10.2859 4.63171 10.4971 4.78514 10.7413 4.82063L14.1046 5.30934C14.7197 5.39873 14.9654 6.15471 14.5202 6.58861L12.0866 8.96084C11.9098 9.13315 11.8292 9.3814 11.8709 9.62469L12.4454 12.9743C12.5505 13.587 11.9074 14.0542 11.3572 13.765L8.349 12.1835C8.13051 12.0686 7.86949 12.0686 7.65099 12.1835L4.64282 13.765C4.0926 14.0542 3.44953 13.587 3.55461 12.9743L4.12912 9.62469C4.17085 9.3814 4.09019 9.13315 3.91342 8.96084L1.47976 6.58861C1.03462 6.15471 1.28025 5.39873 1.89542 5.30934L5.25866 4.82063C5.50294 4.78514 5.71412 4.63171 5.82336 4.41035L7.32745 1.36274Z\"\n fill=\"#F77234\"\n />\n </svg>\n </div>\n )\n })}\n </div>\n </div>\n <div className=\"desktop:size-12 size-10 overflow-hidden\">\n {data?.avatar?.url ? (\n <Avatar className=\"size-full\" isAdaptation={!data?.avatar?.url}>\n <AvatarImage src={data?.avatar?.url} />\n <AvatarFallback>{data?.title}</AvatarFallback>\n </Avatar>\n ) : null}\n </div>\n </div>\n <div className=\"flex-1\">\n <Text\n className={cn(\n 'lg-desktop:text-2xl text-info-primary line-clamp-5 break-words text-xl font-bold leading-[1.2] evaluate-description'\n )}\n >\n {data?.description || ''}\n </Text>\n </div>\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n onClick={() => {\n configuration?.event?.primaryButton(data, configuration?.index + 1)\n }}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description || data?.subTitle}`}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n >\n <div\n className={cn(\n 'mt-3 flex items-center cursor-pointer overflow-hidden bg-[#F7F8F9] p-3',\n configuration?.shape === 'round' ? 'rounded-lg' : 'rounded-none'\n )}\n >\n <div className=\"laptop:size-16 desktop:size-20 mr-3 flex size-12 items-center\">\n <Picture className=\"w-full object-cover\" source={data?.img?.url} alt={data?.img?.alt || ''} />\n </div>\n <p className=\"lg-desktop:text-[18px] desktop-[16px] line-clamp-2 flex-1 text-[14px] font-bold tracking-[-0.04em]\">\n {data?.subTitle || ''}\n </p>\n </div>\n </a>\n </div>\n </div>\n )\n}\n\nconst Evaluate = React.forwardRef<HTMLDivElement, EvaluateProps>(({ className = '', data, key, ...rest }, ref) => {\n const { products, title, theme, ...ohter } = data\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"evaluate-box relative z-10\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\n <div ref={ref} className={cn('w-full', className, { 'aiui-dark': theme === 'dark' })}>\n {title && <Title data={{ title: title }} />}\n <SwiperBox\n className=\"!overflow-visible\"\n id={'Evaluate' + key}\n data={{ list: products, configuration: { ...ohter, title: title } }}\n Slide={EvaluateItem}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1.2,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 2.3,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 3,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: 4,\n },\n }}\n />\n </div>\n </Container>\n </div>\n </div>\n )\n})\n\nexport default withLayout(Evaluate)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "Title", "cn", "Picture", "SwiperBox", "withLayout", "Avatar", "AvatarImage", "AvatarFallback", "Container", "Text", "useExposure", "trackUrlRef", "componentType", "componentName", "EvaluateItem", "data", "configuration", "ref", "handleRating", "num", "raw", "count", "_", "index", "Evaluate", "className", "key", "rest", "products", "title", "theme", "ohter", "innerRef", "Evaluate_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as N,jsx as e,jsxs as
|
|
1
|
+
"use client";import{Fragment as N,jsx as e,jsxs as d}from"react/jsx-runtime";import K,{useState as c,useRef as u,useEffect as f,forwardRef as U}from"react";import{debounce as X}from"es-toolkit";import{useInView as Z}from"react-intersection-observer";import{cn as y}from"../../helpers/utils.js";import{withLayout as D}from"../../shared/Styles.js";import ee from"../Slogan/index.js";import{YouTubePlayer as te}from"../VideoModal/YouTubePlayer.js";import{Grid as re,GridItem as h}from"../../components/gird.js";import{Container as ae}from"../../components/container.js";import se from"../BrandEquity/index.js";import oe from"../MemberEquity/index.js";import ne from"../Spacer/index.js";import ie from"gsap";import{convertLexicalToHTML as S}from"@payloadcms/richtext-lexical/html";import{useMediaQuery as T}from"react-responsive";import le from"../../helpers/ScrollLoadVideo.js";const L=({defaultConverters:s})=>({...s,text:o=>{const{node:t}=o;return t.$&&t.$.color?`<span class="lexical-${t.$.color}">${t.text}</span>`:t.text}}),x=({children:s,spaceY:o,className:t})=>{const a=T({query:"(max-width: 768px)"});return e(ae,{spaceY:o,className:y("!bg-transparent",t),children:d(re,{children:[!a&&e(h,{span:1}),e(h,{span:a?12:10,children:s}),!a&&e(h,{span:1})]})})},ce=K.forwardRef(({children:s,id:o,components:t})=>{const a=u(null);return d("div",{ref:a,className:"relative z-10",children:[e(N,{children:s}),e(N,{children:t?.map(r=>{switch(r.blockType){case"ipc-brand-equity":return e("div",{className:"relative z-20 bg-transparent",children:e(x,{spaceY:"none",children:e(se,{data:r,style:r?.style})})});case"ipc-member-equity":return e("div",{className:"relative z-20 w-full bg-transparent",children:e(x,{spaceY:"none",children:e(oe,{data:r,className:"w-full",style:r?.style})})});case"ipc-spacer":return e(ne,{data:r,style:r?.style,className:"!bg-transparent"});default:return null}})})]})}),de=U(({className:s="",wrapperClassName:o="",id:t,data:{title:a,videoTitle:r,mobVideo:k,mobImg:p,img:m,isYouTube:P,youtubePcId:M,youtubeMobileId:$,video:v,theme:R,shape:B,components:Y}})=>{const H=u(null),b=u(null),{ref:q,inView:i}=Z(),[pe,F]=c(0),[z,I]=c(!1),[j,G]=c(!1),V=u(null),Q=typeof a=="string"?a:a&&S({data:a,converters:L});typeof r=="string"||r&&S({data:r,converters:L});const[O,W]=c(0),[n,_]=c(!1),C=T({query:"(max-width: 768px)"});f(()=>{_(C)},[C]);const w=X(()=>{if(b.current){const g=b.current.getBoundingClientRect(),l=n?window.screen.height:window.innerHeight,A=window.scrollY||window.pageYOffset,J=g.bottom+A,E=document.documentElement.scrollHeight-J;W(E>l?l:E),F(l)}},2e3);return f(()=>{i&&!z&&(H.current?.play(),I(!0))},[i,z]),f(()=>(w(),window.addEventListener("resize",w),()=>{window.removeEventListener("resize",w)}),[]),f(()=>{function g(){const l=n?window.screen.height:window.innerHeight;ie.timeline({scrollTrigger:{trigger:`#${t}`,start:"top top",end:`top+=${l*1.8}px bottom`,scrub:.5}}).from(`#${t} .media-content`,{top:"50%",transform:"translate(-50%, -50%)"}).to(`.${t} .sticky-cover`,{backdropFilter:"blur(8px)",duration:.4}).to(`#${t} .media-content`,{top:"100%",transform:"translate(-50%, -100%)",duration:1},"<")}i&&g()},[i]),d(N,{children:[e("div",{id:t,className:y("relative z-20 h-screen w-full",s,{"aiui-dark":R==="dark","rounded-box":B==="rounded"}),ref:V,children:e("div",{ref:q,className:"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased",style:{willChange:"transform",contain:"paint"},children:e(x,{spaceY:"tablet:my-[32px] my-[24px] space-y-4",children:e(ee,{className:"sticky-title antialiased",data:{title:Q||"",theme:R}})})})}),d("div",{ref:b,style:{marginBottom:`-${O}px`,zIndex:i?2:1},className:y(t,"relative mt-[-200vh]",o),children:[e("div",{className:"sticky top-0 ",children:d("div",{className:y("media-cover","relative h-screen w-full"),children:[P?e(te,{youTubeId:n&&$||M}):v?.url&&e(le,{videoRef:H,poster:n&&p?.url?p?.url:m?.url,src:n&&k?.url?k?.url:v?.url,className:"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]",videoClassName:" object-cover object-[82%]",muted:!0,loop:!1,playsInline:!0,onEnded:()=>{G(!0)}}),m?.url&&(!v?.url||j)&&e("img",{src:n&&p?.url?p?.url:m?.url,alt:m?.alt,className:"z-1 absolute left-0 top-0 size-full object-cover object-[82%]"}),e("div",{className:"sticky-cover absolute left-0 top-0 z-10 size-full",style:{backdropFilter:"blur(0px)",WebkitBackdropFilter:"blur(0px)",willChange:"backdrop-filter"}})]})}),e("div",{className:"relative h-screen w-full"}),e(ce,{components:Y}),e("div",{className:"relative h-screen w-full"})]})]})});var Ee=D(de);export{Ee as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/MediaPlayerSticky/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n
|
|
5
|
-
"mappings": "aA+CM,OAuBA,YAAAA,EAtBgB,OAAAC,EADhB,QAAAC,MAAA,oBA9CN,OAAOC,GAAS,YAAAC,EAAU,UAAAC,EAAQ,aAAAC,EAAW,cAAAC,MAAkB,QAC/D,OAAS,YAAAC,MAAgB,aACzB,OAAS,aAAAC,MAAiB,8BAC1B,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAC3B,OAAOC,OAAY,qBACnB,OAAS,iBAAAC,OAAqB,iCAC9B,OAAS,QAAAC,GAAM,YAAAC,MAAgB,2BAC/B,OAAS,aAAAC,OAAiB,gCAC1B,OAAOC,OAAiB,0BACxB,OAAOC,OAAkB,2BACzB,OAAOC,OAAY,qBACnB,OAAOC,OAAU,OACjB,OAAS,wBAAAC,MAA4B,oCAIrC,OAAS,iBAAAC,MAAqB,mBAE9B,OAAOC,OAAqB,mCAE5B,MAAMC,EAAyC,CAAC,CAAE,kBAAAC,CAAkB,KAAO,CACzE,GAAGA,EACH,KAAMC,GAAQ,CACZ,KAAM,CAAE,KAAAC,CAAK,EAAID,EAGjB,OAAIC,EAAK,GAAKA,EAAK,EAAE,MACZ,wBAAwBA,EAAK,EAAE,KAAK,KAAKA,EAAK,IAAI,UAEpDA,EAAK,IACd,CACF,GAEMC,EAAe,CAAC,CACpB,SAAAC,EACA,OAAAC,EACA,UAAAC,CACF,IAIM,CACJ,MAAMC,EAAWV,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAC9D,OACErB,EAACe,GAAA,CAAU,OAAQc,EAAQ,UAAWpB,EAAG,kBAAmBqB,CAAS,EACnE,SAAA7B,EAACY,GAAA,CACE,WAACkB,GAAY/B,EAACc,EAAA,CAAS,KAAM,EAAG,EACjCd,EAACc,EAAA,CAAS,KAAMiB,EAAW,GAAK,GAAK,SAAAH,EAAS,EAC7C,CAACG,GAAY/B,EAACc,EAAA,CAAS,KAAM,EAAG,GACnC,EACF,CAEJ,EAEMkB,GAAS9B,EAAM,WASnB,CAAC,CAAE,SAAA0B,EAAU,GAAAK,EAAI,WAAAC,CAAW,IAAM,CAClC,MAAMC,EAAuB/B,EAAuB,IAAI,EAExD,OACEH,EAAC,OAAI,IAAKkC,EAAsB,UAAU,gBACxC,UAAAnC,EAAAD,EAAA,CAAG,SAAA6B,EAAS,EACZ5B,EAAAD,EAAA,CACG,SAAAmC,GAAY,IAAKE,GAAuB,CACvC,OAAQA,EAAc,UAAW,CAC/B,IAAK,mBACH,OACEpC,EAAC,OAAI,UAAU,+BACb,SAAAA,EAAC2B,EAAA,CAAa,OAAO,OACnB,SAAA3B,EAACgB,GAAA,CAAY,KAAMoB,EAAe,MAAOA,GAAe,MAAO,EACjE,EACF,EAGJ,IAAK,oBACH,OACEpC,EAAC,OAAI,UAAU,sCACb,SAAAA,EAAC2B,EAAA,CAAa,OAAO,OACnB,SAAA3B,EAACiB,GAAA,CAAa,KAAMmB,EAAe,UAAU,SAAS,MAAOA,GAAe,MAAO,EACrF,EACF,EAGJ,IAAK,aACH,OAAOpC,EAACkB,GAAA,CAAO,KAAMkB,EAAe,MAAOA,GAAe,MAAO,UAAU,kBAAkB,EAE/F,QACE,OAAO,IACX,CACF,CAAC,EACH,GACF,CAEJ,CAAC,EAEKC,GAAoB/B,EAMxB,CAAC,CACC,UAAAwB,EAAY,GACZ,
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useState, useRef, useEffect, forwardRef } from 'react'\nimport { debounce } from 'es-toolkit'\nimport { useInView } from 'react-intersection-observer'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport Slogan from '../Slogan/index.js'\nimport { YouTubePlayer } from '../VideoModal/YouTubePlayer.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Container } from '../../components/container.js'\nimport BrandEquity from '../BrandEquity/index.js'\nimport MemberEquity from '../MemberEquity/index.js'\nimport Spacer from '../Spacer/index.js'\nimport gsap from 'gsap'\nimport { convertLexicalToHTML } from '@payloadcms/richtext-lexical/html'\n\nimport type { HTMLConvertersFunction } from '@payloadcms/richtext-lexical/html'\n\nimport { useMediaQuery } from 'react-responsive'\nimport type { MediaPlayerBaseProps, MediaPlayerComponent } from './types.js'\nimport ScrollLoadVideo from '../../helpers/ScrollLoadVideo.js'\n\nconst htmlConverters: HTMLConvertersFunction = ({ defaultConverters }) => ({\n ...defaultConverters,\n text: args => {\n const { node } = args\n\n // \u68C0\u67E5\u662F\u5426\u6709\u81EA\u5B9A\u4E49 color\n if (node.$ && node.$.color) {\n return `<span class=\"lexical-${node.$.color}\">${node.text}</span>`\n }\n return node.text\n },\n})\n\nconst SubContainer = ({\n children,\n spaceY,\n className,\n}: {\n children: React.ReactNode\n spaceY?: string\n className?: string\n}) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n return (\n <Container spaceY={spaceY} className={cn('!bg-transparent', className)}>\n <Grid>\n {!isMobile && <GridItem span={1} />}\n <GridItem span={isMobile ? 12 : 10}>{children}</GridItem>\n {!isMobile && <GridItem span={1} />}\n </Grid>\n </Container>\n )\n}\n\nconst SubBox = React.forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n {\n children?: React.ReactNode\n id?: string\n components?: MediaPlayerComponent[]\n }\n>(({ children, id, components }) => {\n const mediaPlayerStickyRef = useRef<HTMLDivElement>(null)\n\n return (\n <div ref={mediaPlayerStickyRef} className=\"relative z-10\">\n <>{children}</>\n <>\n {components?.map((componentData: any) => {\n switch (componentData.blockType) {\n case 'ipc-brand-equity': {\n return (\n <div className=\"relative z-20 bg-transparent\">\n <SubContainer spaceY=\"none\">\n <BrandEquity data={componentData} style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-member-equity': {\n return (\n <div className=\"relative z-20 w-full bg-transparent\">\n <SubContainer spaceY=\"none\">\n <MemberEquity data={componentData} className=\"w-full\" style={componentData?.style} />\n </SubContainer>\n </div>\n )\n }\n case 'ipc-spacer': {\n return <Spacer data={componentData} style={componentData?.style} className=\"!bg-transparent\" />\n }\n default:\n return null\n }\n })}\n </>\n </div>\n )\n})\n\nconst MediaPlayerSticky = forwardRef<\n {\n mediaPlayerStickyRef: HTMLDivElement\n },\n MediaPlayerBaseProps\n>(\n ({\n className = '',\n wrapperClassName = '',\n id,\n data: {\n title,\n videoTitle,\n mobVideo,\n mobImg,\n img,\n isYouTube,\n youtubePcId,\n youtubeMobileId,\n video,\n theme,\n shape,\n components,\n },\n }) => {\n const videoRef = useRef<HTMLVideoElement>(null)\n const boxRef = useRef<HTMLDivElement>(null)\n const { ref: inViewRef, inView } = useInView()\n const [screenHeight, setScreenHeight] = useState(0)\n const [isPlaying, setIsPlaying] = useState(false)\n const [isEntered, setIsEntered] = useState(false)\n const wrapperRef = useRef<HTMLDivElement>(null)\n\n const title_html =\n typeof title === 'string' ? title : title && convertLexicalToHTML({ data: title, converters: htmlConverters })\n typeof videoTitle === 'string'\n ? videoTitle\n : videoTitle && convertLexicalToHTML({ data: videoTitle, converters: htmlConverters })\n\n const [btb, setbtb] = useState(0)\n const [isMobile, setIsMobile] = useState(false)\n const mediaQuery = useMediaQuery({ query: '(max-width: 768px)' })\n\n useEffect(() => {\n setIsMobile(mediaQuery)\n }, [mediaQuery])\n\n const debouncedHandleResize = debounce(() => {\n if (boxRef.current) {\n const rect = boxRef.current.getBoundingClientRect()\n const screenHeight = isMobile ? window.screen.height : window.innerHeight\n const scrollTop = window.scrollY || window.pageYOffset\n const elementBottomToPageTop = rect.bottom + scrollTop\n const pageHeight = document.documentElement.scrollHeight\n const distanceToPageBottom = pageHeight - elementBottomToPageTop\n setbtb(distanceToPageBottom > screenHeight ? screenHeight : distanceToPageBottom)\n setScreenHeight(screenHeight)\n }\n }, 2000)\n\n useEffect(() => {\n if (inView && !isPlaying) {\n videoRef.current?.play()\n setIsPlaying(true)\n }\n }, [inView, isPlaying])\n\n useEffect(() => {\n debouncedHandleResize()\n window.addEventListener('resize', debouncedHandleResize)\n return () => {\n window.removeEventListener('resize', debouncedHandleResize)\n }\n }, [])\n\n useEffect(() => {\n function gsapResize() {\n const height = isMobile ? window.screen.height : window.innerHeight\n gsap\n .timeline({\n scrollTrigger: {\n trigger: `#${id}`,\n start: 'top top',\n end: `top+=${height * 1.8}px bottom`,\n scrub: 0.5,\n },\n })\n .from(`#${id} .media-content`, { top: '50%', transform: 'translate(-50%, -50%)' })\n .to(`.${id} .sticky-cover`, {\n backdropFilter: 'blur(8px)',\n duration: 0.4,\n })\n .to(\n `#${id} .media-content`,\n {\n top: '100%',\n transform: 'translate(-50%, -100%)',\n duration: 1,\n },\n '<'\n )\n }\n if (inView) {\n gsapResize()\n }\n }, [inView])\n\n return (\n <>\n <div\n id={id}\n className={cn('relative z-20 h-screen w-full', className, {\n 'aiui-dark': theme === 'dark',\n 'rounded-box': shape === 'rounded',\n })}\n ref={wrapperRef}\n >\n <div\n ref={inViewRef}\n className=\"media-content translate-z-0 absolute left-1/2 top-1/2 z-10 w-full -translate-x-1/2 -translate-y-1/2 antialiased\"\n style={{ willChange: 'transform', contain: 'paint' }}\n >\n <SubContainer spaceY=\"tablet:my-[32px] my-[24px] space-y-4\">\n <Slogan className=\"sticky-title antialiased\" data={{ title: title_html || '', theme }} />\n </SubContainer>\n </div>\n </div>\n\n <div\n ref={boxRef}\n style={{ marginBottom: `-${btb}px`, zIndex: inView ? 2 : 1 }}\n className={cn(id, 'relative mt-[-200vh]', wrapperClassName)}\n >\n <div className=\"sticky top-0 \">\n <div className={cn('media-cover', 'relative h-screen w-full')}>\n {isYouTube ? (\n <YouTubePlayer youTubeId={isMobile ? youtubeMobileId || youtubePcId : youtubePcId} />\n ) : (\n video?.url && (\n <ScrollLoadVideo\n videoRef={videoRef}\n poster={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n src={isMobile && mobVideo?.url ? mobVideo?.url : video?.url}\n className=\"lg-desktop:aspect-w-[1920] lg-desktop:aspect-h-[930] lg:aspect-w-[1440] lg:aspect-h-[700] desktop:aspect-w-[1024] desktop:aspect-h-[520] tablet:aspect-w-[768] tablet:aspect-h-[660] aspect-w-[390] aspect-h-[660]\"\n videoClassName=\" object-cover object-[82%]\"\n muted\n loop={false}\n playsInline\n onEnded={() => {\n setIsEntered(true)\n }}\n />\n )\n )}\n {img?.url && (!video?.url || isEntered) && (\n <img\n src={isMobile && mobImg?.url ? mobImg?.url : img?.url}\n alt={img?.alt}\n className=\"z-1 absolute left-0 top-0 size-full object-cover object-[82%]\"\n />\n )}\n <div\n className=\"sticky-cover absolute left-0 top-0 z-10 size-full\"\n style={{\n backdropFilter: 'blur(0px)',\n WebkitBackdropFilter: 'blur(0px)',\n willChange: 'backdrop-filter',\n }}\n />\n </div>\n </div>\n\n <div className=\"relative h-screen w-full\" />\n <SubBox components={components}></SubBox>\n <div className=\"relative h-screen w-full\" />\n </div>\n </>\n )\n }\n)\n\nexport default withLayout(MediaPlayerSticky)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "React", "useState", "useRef", "useEffect", "forwardRef", "debounce", "useInView", "cn", "withLayout", "Slogan", "YouTubePlayer", "Grid", "GridItem", "Container", "BrandEquity", "MemberEquity", "Spacer", "gsap", "convertLexicalToHTML", "useMediaQuery", "ScrollLoadVideo", "htmlConverters", "defaultConverters", "args", "node", "SubContainer", "children", "spaceY", "className", "isMobile", "SubBox", "id", "components", "mediaPlayerStickyRef", "componentData", "MediaPlayerSticky", "wrapperClassName", "title", "videoTitle", "mobVideo", "mobImg", "img", "isYouTube", "youtubePcId", "youtubeMobileId", "video", "theme", "shape", "videoRef", "boxRef", "inViewRef", "inView", "screenHeight", "setScreenHeight", "isPlaying", "setIsPlaying", "isEntered", "setIsEntered", "wrapperRef", "title_html", "btb", "setbtb", "setIsMobile", "mediaQuery", "debouncedHandleResize", "rect", "scrollTop", "elementBottomToPageTop", "distanceToPageBottom", "gsapResize", "height", "MediaPlayerSticky_default"]
|
|
7
7
|
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import{Fragment as
|
|
1
|
+
import{Fragment as U,jsx as s,jsxs as c}from"react/jsx-runtime";import{useAiuiContext as W}from"../AiuiProvider/index.js";import{formatVariantPrice as A}from"./shelfDisplay.js";import L from"../../components/picture.js";import E from"../../components/badge.js";import{cn as u}from"../../helpers/utils.js";import{Text as R}from"../../components/text.js";import B from"../../components/button.js";import{gaTrack as M}from"../../shared/track.js";import{trackUrlRef as V}from"../../shared/trackUrlRef.js";import{Heading as q}from"../../components/heading.js";import{useExposure as G}from"../../hooks/useExposure.js";import{useRef as J,useEffect as K,useState as F}from"react";const D="image",C="product_shelf",Q=999999999e-2,ce=({data:e,configuration:t})=>{const{isDisplayBackImage:$=!1,itemShape:y,metafields:I,isTopTag:P=!1,isShowTag:v,isShowOriginalPrice:k}=t||{},{locale:x="us",copyWriting:j}=W(),{discounts:w}=I||{},S=J(null),[N,i]=F([]),[_,O]=F(""),T=(l,r,p)=>t?.event?.primaryButton?.(l,r+1,p),g=(l,r,p)=>t?.event?.secondaryButton?.(l,r+1,p),n=e?.variants?.find(l=>l?.sku===e?.sku)||e?.variants?.[0]||{},z=!n?.availableForSale&&n?.price?.amount===Q,m=n?.coupons?.[0],{price:H,basePrice:f,discount:d}=A({locale:x,amount:k&&m?m.variant_price4wscode:n.price,baseAmount:k&&m?n.price:0,currencyCode:e?.price?.currencyCode||"USD"}),b=()=>{const l=e?.sku,r=e?.variants;return r?.find(X=>X?.sku===l)?.image?.url||r?.[0]?.image?.url||""},h=e?.custom_name||e?.title,a=e?.custom_description||e?.description;K(()=>{let l=[];if(d){const p=`${d}${w?.off||""}`;O(p),l.push(p)}const r=e?.tags?.filter?.(p=>p?.startsWith?.("CLtag"))?.map?.(p=>p?.replace?.("CLtag:",""))?.slice?.(0,d?1:2);i(l.concat(r))},[e?.tags,d]),G(S,{componentType:D,componentName:C,componentTitle:h,componentDescription:a,position:t?.index+1});const o=()=>c(U,{children:[v&&N?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:N?.map?.((l,r)=>s(E,{className:"shelf-items-tag",children:l},r))}):null,h?s(q,{as:"h3",title:h||"",size:2,className:"shelf-display-product-title line-clamp-2",html:h||""}):null,a?s(R,{size:2,className:"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm",html:a||""}):null,s("div",{className:"mb-2 mt-4 flex items-center",children:z?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:j?.soldOutText}):c(U,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:n?.availableForSale&&H||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:n?.availableForSale&&f||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>g(e,t?.index,t),className:`
|
|
2
2
|
${t.direction==="vertical"?"w-full":""}
|
|
3
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(
|
|
3
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>T(e,t?.index,t),className:`
|
|
4
4
|
${t.direction==="vertical"?"w-full":""}
|
|
5
|
-
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:
|
|
5
|
+
`,children:t?.primaryButton||""}):null]})]});return s("div",{ref:S,className:u("bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300",y==="round"?"rounded-2xl":"rounded-none","lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480] desktop:aspect-w-[316] desktop:aspect-h-[384]","laptop:aspect-w-[288] laptop:aspect-h-[360] aspect-w-[296] aspect-h-[360] relative","md-tablet:h-[360px] shelf-display-item"),children:$?s("div",{className:"absolute inset-0 box-border overflow-hidden",children:c("div",{className:"relative inset-0 size-full",children:[s(L,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"}),s("div",{className:"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4",children:o()})]})}):c("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4",children:[_&&P&&s(E,{className:"absolute left-4 top-4 z-10 shelf-prices-tag",children:_||""}),s("div",{className:u("lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden shelf-display-item-image"),children:s("a",{"aria-label":h,target:t?.target,href:V(`${x==="us"||!x?"":`/${x}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{M({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||n?.sku,item_name:e?.name,item_variant:n?.name,price:n?.price,index:t?.index+1}]}})},children:s(L,{source:b(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),o()]})},e?.id||e?.handle)},me=({data:e,configuration:t})=>{const{itemShape:$,itemLength:y,metafields:I}=t||{},{discounts:P}=I||{},{locale:v="us",copyWriting:k}=W(),[x,j]=F([]),w=J(null),S=(a,o,l)=>t?.event?.primaryButton?.(a,o+1,l),N=(a,o,l)=>t?.event?.secondaryButton?.(a,o+1,l),i=e?.variants?.find(a=>a?.sku===e?.sku)||e?.variants?.[0]||{},_=!i?.availableForSale&&i?.price?.amount===Q,O=t?.isShowTag,T=t?.isShowOriginalPrice,g=i?.coupons?.[0],{price:n,basePrice:z,discount:m}=A({locale:v,amount:T&&g?g.variant_price4wscode:i.price,baseAmount:T&&g?i.price:0,currencyCode:e?.price?.currencyCode||"USD"}),H=()=>{const a=e?.sku,o=e?.variants;return o?.find(r=>r?.sku===a)?.image?.url||o?.[0]?.image?.url||""},f=e?.custom_name||e?.title,d=e?.custom_description||e?.description;G(w,{componentType:D,componentName:C,componentTitle:f,componentDescription:d,position:t?.index+1});const b=()=>y>=2?{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full",imgItem:"m-tablet:m-auto lg-desktop:max-w-[330px] lg-desktop:max-h-[330px] desktop:max-w-[260px] desktop:max-h-[260px] max-w-[138px] max-h-[138px]",wrap:"lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480] desktop:aspect-w-[648] desktop:aspect-h-[380] laptop:aspect-w-[440] laptop:aspect-h-[356] tablet:aspect-w-[346] tablet:aspect-h-[360] md-tablet:w-full"}:{boxItem:"lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]",imgItem:"md-tablet:m-auto lg-desktop:max-w-[450px] lg-desktop:max-h-[450px] desktop:max-w-[332px] desktop:max-h-[332px] max-w-[312px] max-h-[312px]",wrap:"lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[480] desktop:aspect-w-[1312] desktop:aspect-h-[380] laptop:aspect-w-[896] laptop:aspect-h-[356] tablet:aspect-w-[704] tablet:aspect-h-[360] md-tablet:w-full"},h=()=>y>=2?"flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center":"flex justify-center items-center gap-6 md-tablet:flex-col";return K(()=>{let a=[];if(m){const l=`${m}${P?.off||""}`;a.push(l)}const o=e?.tags?.filter?.(l=>l?.startsWith?.("CLtag"))?.map?.(l=>l?.replace?.("CLtag:",""))?.slice?.(0,m?1:2);j(a.concat(o))},[e?.tags,m]),s("div",{ref:w,className:u(b().wrap,$==="round"?"rounded-2xl":"rounded-none","shelf-display-item","bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6","box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]"),children:c("div",{className:u(h(),"desktop:p-6 absolute inset-0 box-border overflow-hidden p-4"),children:[s("div",{className:u(b().imgItem,"relative overflow-hidden desktop:mb-0 mb-1"),children:s("a",{"aria-label":f,target:t?.target,href:V(`${v==="us"||!v?"":`/${v}`}/products/${e?.handle}`,`${D}_${C}`),onClick:()=>{M({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||i?.sku,item_name:e?.name,item_variant:i?.name,price:i?.price,index:t?.index+1}]}})},children:s(L,{source:H(),alt:"",className:"flex h-full justify-center object-cover [&_img]:w-auto"})})}),c("div",{className:u("flex flex-col justify-center items-start",b().boxItem),children:[O&&x?.length>0?s("div",{className:"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden",children:x?.map?.((a,o)=>s(E,{className:"shelf-items-tag",children:a},o))}):null,f?s(q,{as:"h3",title:f||"",size:2,className:"shelf-display-product-title mb-1 line-clamp-2",html:f||""}):null,d?s(R,{size:2,className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 shelf-display-product-description line-clamp-1 h-5 text-sm",html:d||""}):null,s("div",{className:"mb-2 mt-5 flex items-center",children:_?s("div",{className:"tablet:text-2xl text-info-primary text-xl font-bold",children:k?.soldOutText}):c(U,{children:[s("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-bold",children:i?.availableForSale&&n||""}),s("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through",children:i?.availableForSale&&z||""})]})}),c("div",{className:u("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?s(B,{variant:"secondary",onClick:()=>N(e,t?.index,t),className:`
|
|
6
6
|
${t.direction==="vertical"?"w-full":""}
|
|
7
|
-
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(
|
|
7
|
+
`,children:t?.secondaryButton||""}):null,t?.primaryButton?s(B,{variant:"primary",onClick:()=>S(e,t?.index,t),className:`
|
|
8
8
|
${t.direction==="vertical"?"w-full":""}
|
|
9
|
-
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{
|
|
9
|
+
`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{me as ShelfDisplayHorizontalItem,ce as ShelfDisplayWrapItem};
|
|
10
10
|
//# sourceMappingURL=shelfDisplayItem.js.map
|