@anker-in/headless-ui 1.1.0 → 1.1.2
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/ShelfDisplay/shelfDisplayItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { isDisplayBackImage = false, itemShape, metafields } = configuration || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { discounts } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice, discount } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n 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\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-3 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === '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] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n <div\n className={cn(\n 'lg-desktop:mb-3 lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts } = metafields || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice, discount } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n '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]',\n 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',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n '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]',\n 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',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6',\n 'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n 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\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "metafields", "locale", "copyWriting", "discounts", "ref", "showTags", "setShowTags", "
|
|
4
|
+
"sourcesContent": ["import { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from './shelfDisplay.js'\nimport Picture from '../../components/picture.js'\nimport Badge from '../../components/badge.js'\nimport { cn } from '../../helpers/utils.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { Heading } from '../../components/heading.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from './shelfDisplay.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useRef, useEffect, useState } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const ShelfDisplayWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const {\n isDisplayBackImage = false,\n itemShape,\n metafields,\n isTopTag = false,\n isShowTag,\n isShowOriginalPrice,\n } = configuration || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const { discounts, discountsCopy } = metafields || {}\n const ref = useRef<HTMLDivElement>(null)\n const [showTags, setShowTags] = useState<string[]>([])\n const [currentPriceTag, setCurrentPriceTag] = useState<string>('')\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice, discount } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n setCurrentPriceTag(discountTag)\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount])\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const bottomContent = () => {\n return (\n <>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n className=\"lg-desktop:text-lg desktop:text-base shelf-display-product-description line-clamp-1 text-sm\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-4 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </>\n )\n }\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n 'bg-container-secondary-1 tablet:hover:bg-info-white box-border w-full cursor-pointer overflow-hidden duration-300',\n itemShape === '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] shelf-display-item'\n )}\n >\n {isDisplayBackImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden\">\n <div className=\"relative inset-0 size-full\">\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n <div className=\"desktop:p-6 absolute inset-x-0 bottom-0 box-border overflow-hidden p-4\">\n {bottomContent()}\n </div>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden p-4\">\n {currentPriceTag && isTopTag && (\n <Badge className=\"absolute left-4 top-4 z-10 shelf-prices-tag\">{currentPriceTag || ''}</Badge>\n )}\n <div\n className={cn(\n 'lg-desktop:h-[195px] relative mb-2 inline-block h-[140px] w-full flex-1 overflow-hidden shelf-display-item-image'\n )}\n >\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n {bottomContent()}\n </div>\n )}\n </div>\n )\n}\n\nexport const ShelfDisplayHorizontalItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape, itemLength, metafields } = configuration || {}\n const { discounts, discountsCopy } = metafields || {}\n const { locale = 'us', copyWriting } = useAiuiContext()\n const [showTags, setShowTags] = useState<string[]>([])\n const ref = useRef<HTMLDivElement>(null)\n\n const onPrimaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.primaryButton?.(params, index + 1, data)\n\n const onSecondaryButton = (params: ShelfDisplayItem, index: number, data: ShelfDisplayType) =>\n configuration?.event?.secondaryButton?.(params, index + 1, data)\n\n const variant = data?.variants?.find((item: any) => item?.sku === data?.sku) || data?.variants?.[0] || {}\n\n const isSoldOut = !variant?.availableForSale && variant?.price?.amount === SOLD_OUT_PRICE\n const isShowTag = configuration?.isShowTag\n const isShowOriginalPrice = configuration?.isShowOriginalPrice\n\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice, discount } = formatVariantPrice({\n locale: locale,\n amount: isShowOriginalPrice && coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: isShowOriginalPrice && coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n\n const handleUrl = () => {\n const sku = data?.sku\n const skuArray = data?.variants\n const findSku = skuArray?.find((item: any) => item?.sku === sku)\n return findSku?.image?.url || skuArray?.[0]?.image?.url || ''\n }\n\n const displayTitle = data?.custom_name || data?.title\n const displayDescription = data?.custom_description || data?.description\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: displayTitle,\n componentDescription: displayDescription,\n position: configuration?.index + 1,\n })\n\n const showSizeClass = (): {\n boxItem: string\n imgItem: string\n wrap: string\n } => {\n if (itemLength >= 2) {\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] max-w-full',\n imgItem:\n '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]',\n 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',\n }\n }\n return {\n boxItem: 'lg-desktop:max-w-[401px] desktop:max-w-[292px] laptop:max-w-[289px] max-w-[262px]',\n imgItem:\n '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]',\n 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',\n }\n }\n\n const handleWrapClass = () => {\n if (itemLength >= 2) {\n return 'flex flex-col justify-between desktop:gap-12 desktop:flex-row desktop:justify-center desktop:items-center'\n }\n return 'flex justify-center items-center gap-6 md-tablet:flex-col'\n }\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${discounts?.off || discountsCopy?.off || ''}`\n handleTags.push(discountTag)\n }\n const newTags = data?.tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discount ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [data?.tags, discount])\n\n return (\n <div\n ref={ref}\n key={data?.id || data?.handle}\n className={cn(\n showSizeClass().wrap,\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'shelf-display-item',\n 'bg-container-secondary-1 tablet:hover:bg-info-white duration-300 gap-6',\n 'box-border w-full cursor-pointer overflow-hidden relative md-tablet:h-[360px]'\n )}\n >\n <div className={cn(handleWrapClass(), 'desktop:p-6 absolute inset-0 box-border overflow-hidden p-4')}>\n <div className={cn(showSizeClass().imgItem, 'relative overflow-hidden desktop:mb-0 mb-1')}>\n <a\n aria-label={displayTitle}\n target={configuration?.target}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n onClick={() => {\n gaTrack({\n event: 'ga4Event',\n event_name: 'select_item',\n event_parameters: {\n page_group: 'Home Page',\n item_list_name: 'Home_Page_Bundle',\n items: [\n {\n item_id: data?.sku || variant?.sku,\n item_name: data?.name,\n item_variant: variant?.name,\n price: variant?.price,\n index: configuration?.index + 1,\n },\n ],\n },\n })\n }}\n >\n <Picture source={handleUrl()} alt=\"\" className=\"flex h-full justify-center object-cover [&_img]:w-auto\" />\n </a>\n </div>\n <div className={cn('flex flex-col justify-center items-start', showSizeClass().boxItem)}>\n {isShowTag && showTags?.length > 0 ? (\n <div className=\"mb-1 box-border flex h-8 flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => (\n <Badge key={index} className=\"shelf-items-tag\">\n {item}\n </Badge>\n ))}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n size={2}\n className=\"shelf-display-product-title mb-1 line-clamp-2\"\n html={displayTitle || ''}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n 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\"\n html={displayDescription || ''}\n />\n ) : null}\n <div className=\"mb-2 mt-5 flex items-center\">\n {isSoldOut ? (\n <div className=\"tablet:text-2xl text-info-primary text-xl font-bold\">{copyWriting?.soldOutText}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn(\n 'shelf-flex-button-group',\n 'lg-desktop:gap-3 flex items-center gap-2',\n configuration.direction === 'vertical' ? 'flex-col' : ''\n )}\n >\n {configuration?.secondaryButton ? (\n <Button\n variant=\"secondary\"\n onClick={() => onSecondaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`\n ${configuration.direction === 'vertical' ? 'w-full' : ''}\n `}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "useAiuiContext", "formatVariantPrice", "Picture", "Badge", "cn", "Text", "Button", "gaTrack", "trackUrlRef", "Heading", "useExposure", "useRef", "useEffect", "useState", "componentType", "componentName", "SOLD_OUT_PRICE", "ShelfDisplayWrapItem", "data", "configuration", "isDisplayBackImage", "itemShape", "metafields", "isTopTag", "isShowTag", "isShowOriginalPrice", "locale", "copyWriting", "discounts", "discountsCopy", "ref", "showTags", "setShowTags", "currentPriceTag", "setCurrentPriceTag", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "bottomContent", "ShelfDisplayHorizontalItem", "itemLength", "showSizeClass", "handleWrapClass"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as
|
|
1
|
+
"use client";import{Fragment as G,jsx as s,jsxs as c}from"react/jsx-runtime";import P from"./dropdown";import{useAiuiContext as _}from"../AiuiProvider/index.js";import{useMediaQuery as I}from"react-responsive";import{useMemo as U,useState as D,useEffect as E}from"react";import{withLayout as V}from"../../shared/Styles.js";import{formatVariantPrice as B}from"../ShelfDisplay/shelfDisplay.js";import{Picture as x,Text as O,Button as $,Heading as C}from"../../components/index.js";import q,{useImperativeHandle as z,useRef as Q}from"react";const M=q.forwardRef((S,T)=>{const{data:g,buildData:p,onChange:F}=S||{},v=I({query:"(max-width: 768px)"}),[o,m]=D({}),[f,h]=D({}),w=Q(null),{locale:j="us"}=_(),{LeftMenu:k,RightMenu:y,DefaultSelectMenu:u}=U(()=>g?.data||{},[g?.data]),A=e=>{try{const l=new URL(e).pathname.toLowerCase();return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/.test(l)}catch{return/\.(jpeg|jpg|gif|png|webp|bmp|svg|tiff)$/i.test(e)}},L=(e,t)=>{const l=y?.menus?.find?.(b=>b?.handle===e?.handle),a=e?.variants?.find?.(b=>b?.sku===e?.sku||l?.sku),n=a?.coupons?.[0],{price:r,basePrice:d}=B({locale:j||"us",amount:n?n?.variant_price4wscode:a?.price,baseAmount:n?a?.price:0,currencyCode:e?.price?.currencyCode||"USD"}),i=typeof u?.buttonText=="string"?u?.buttonText:u?.buttonText?.[String(t)]||"";return c("div",{className:"box-border specs-sku-node-wrap",children:[c(O,{className:"relative mb-6 box-border block rounded-[50px] border border-[#E4E5E6] bg-[#F5F5F7] px-6 py-4 text-base font-bold md-tablet:p-2 l-tablet:mb-4 l-tablet:text-sm desktop:px-6 lg-desktop:mb-8 lg-desktop:text-lg openDropDown specs-sku-node-text",onClick:()=>h({...f,[t]:!f?.[t]}),children:[c("div",{className:"flex items-center justify-between overflow-hidden",children:[s("div",{className:"openDropDown flex-1 truncate text-base md-tablet:text-sm lg-desktop:text-lg specs-sku-node-title",title:o?.[t]?.name,children:o?.[t]?.name||""}),s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",className:"openDropDown",children:s("path",{d:"M6 9.5L12 15.5L18 9.5",stroke:"#1D1D1F","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round"})})]}),s(P,{index:t,list:p?.products,active:o,filterActive:o,setActive:m,visible:f,setVisible:h})]}),s("div",{className:"max-h-[138px] max-w-[138px] lg-desktop:max-h-[196px] lg-desktop:max-w-[196px]",children:s(x,{source:a?.image?.url||"",className:"aspect-h-[280] aspect-w-[280]",imgClassName:"w-full h-full object-cover hover:scale-105 transition-all duration-300"})}),a?.availableForSale?c("div",{className:"mb-2 mt-6 flex items-center text-xl font-bold lg-desktop:text-2xl",children:[s("div",{className:"text-[#1D1D1F] specs-sku-node-price",children:r||""}),d&&s("div",{className:"ml-1 text-xl text-[#86868C] line-through lg-desktop:text-2xl specs-sku-node-base-price",children:d})]}):!1,i?s($,{onClick:()=>{F?.(e,t)},className:"specs-sku-node-button",children:i}):null]})},H=e=>{if(e)return e&&typeof e!="string"?c("div",{className:"size-full",children:[s("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:e?.text||""}}),s(x,{source:e?.imgUrl,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"})]}):s("div",{className:"break-all",children:A(e)?s(x,{source:e,className:"m-auto max-h-[360px] max-w-[360px] l:max-h-[174px] l:max-w-[174px]",imgClassName:"w-full h-full object-cover"}):s("p",{className:"text-base font-bold text-[#1D1D1F] md:text-sm min-xxl:text-lg specs-normal-node-text",dangerouslySetInnerHTML:{__html:e||""}})})},N=e=>e.map((t,l)=>{const a=l===0;return c("div",{className:"box-border grid w-full cursor-pointer grid-cols-3 overflow-hidden border-t border-t-[#E4E5E6] l-tablet:flex l-tablet:flex-col specs-product-node-wrap",children:[s(C,{as:"h3",html:t||"",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"}),s("div",{className:"col-span-2 grid flex-1 py-6 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 specs-product-node-body",children:Object.keys(o)?.map?.(n=>{const r=o?.[n],d=y?.menus?.find?.(i=>i?.handle===r?.handle)?.subTitle;return H(d?.[t])})})]},t)}),R=e=>{if(!o)return;const{subTitle:t,isProduct:l}=e;return l?c(G,{children:[c("div",{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",children:[e?.title&&s(C,{as:"h3",html:e?.title||"",className:"l:hidden specs-item-product-title"}),s("div",{className:"col-span-2 grid flex-1 pb-4 l-tablet:w-full l-tablet:gap-4 laptop:gap-8 desktop:gap-12 desktop:p-6 lg-desktop:gap-16 grid-cols-2 pr-0 specs-item-product-body",children:Object.keys(o)?.map((a,n)=>{const r=o?.[a],d=p?.products?.find?.(i=>i?.handle===r?.handle);return s("div",{children:L({...d,sku:r?.sku,item:a},n)},a)})})]}),t?.length?N(t):null]}):N(t)};return z(T,()=>w.current),E(()=>{if(!p?.products?.length)return;const e=u?.sku?.split?.(",")||[];let t={};e?.forEach?.((l,a)=>{const n=p?.products?.find?.(r=>{if(r?.variants?.find?.(i=>i?.sku===l))return!0});n&&(t={...t,[a]:{sku:l,name:n?.name,handle:n?.handle}})}),m(t)},[p]),E(()=>{if(v){const e=Object.keys(o||{});if(e?.length>2){const t=e?.slice?.(0,2);let l={};t?.forEach?.(a=>{l={...l,[a]:o?.[a]}}),m(l)}}},[v]),s("div",{className:"w-full overflow-hidden bg-[#F5F5F7] specs-wrapper",ref:w,children:k?.data?s("div",{className:"box-border w-full overflow-hidden specs-wrapper-content",children:k?.data?.map?.((e,t)=>s("div",{className:"w-full overflow-hidden pt-10 [&:first-child]:pt-0 specs-wrapper-content-item",children:R(e)},t))}):null})});M.displayName="Specs";var ae=V(M);export{ae as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -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": "
|
|
6
|
-
"names": ["Fragment", "jsx", "jsxs", "DropDown", "useAiuiContext", "useMediaQuery", "useMemo", "useState", "useEffect", "withLayout", "formatVariantPrice", "Picture", "Text", "Button", "Heading", "React", "useImperativeHandle", "useRef", "Specs", "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", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive", "Specs_default"]
|
|
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": "aAwDU,OA8IF,YAAAA,EA7II,OAAAC,EADF,QAAAC,MAAA,oBAtDV,OAAOC,MAAc,aACrB,OAAS,kBAAAC,MAAsB,2BAC/B,OAAS,iBAAAC,MAAqB,mBAC9B,OAAS,WAAAC,EAAS,YAAAC,EAAU,aAAAC,MAAiB,QAC7C,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,sBAAAC,MAA0B,kCACnC,OAAS,WAAAC,EAAS,QAAAC,EAAM,UAAAC,EAAmB,WAAAC,MAAe,4BAC1D,OAAOC,GAAS,uBAAAC,EAAqB,UAAAC,MAAc,QAEnD,MAAMC,EAAQH,EAAM,WAAgC,CAACI,EAAWC,IAAQ,CACtE,KAAM,CAAE,KAAAC,EAAM,UAAAC,EAAW,SAAAC,CAAS,EAAIJ,GAAQ,CAAC,EAEzCK,EAAWnB,EAAc,CAAE,MAAO,oBAAqB,CAAC,EAExD,CAACoB,EAAQC,CAAS,EAAInB,EAAc,CAAC,CAAC,EACtC,CAACoB,EAAeC,CAAgB,EAAIrB,EAAqC,CAAC,CAAC,EAE3EsB,EAAWZ,EAAuB,IAAI,EAEtC,CAAE,OAAAa,EAAS,IAAK,EAAI1B,EAAe,EAEnC,CAAE,SAAA2B,EAAU,UAAAC,EAAW,kBAAAC,CAAkB,EAAI3B,EAAQ,IAAMe,GAAM,MAAQ,CAAC,EAAG,CAACA,GAAM,IAAI,CAAC,EAEzFa,EAAcC,GAAoB,CACtC,GAAI,CAEF,MAAMC,EADM,IAAI,IAAID,CAAO,EACV,SAAS,YAAY,EACtC,MAAO,0CAA0C,KAAKC,CAAI,CAC5D,MAAY,CAEV,MAAO,2CAA2C,KAAKD,CAAO,CAChE,CACF,EAEME,EAAU,CAACC,EAAcC,IAAkB,CAC/C,MAAMC,EAAkBR,GAAW,OAAO,OAAQS,GAAcA,GAAM,SAAWH,GAAS,MAAM,EAC1FI,EAAUJ,GAAS,UAAU,OAAQG,GAAcA,GAAM,MAAQH,GAAS,KAAOE,GAAiB,GAAG,EACrGG,EAASD,GAAS,UAAU,CAAC,EAC7B,CAAE,MAAAE,EAAO,UAAAC,CAAU,EAAInC,EAAmB,CAC9C,OAAQoB,GAAU,KAClB,OAAQa,EAASA,GAAQ,qBAAuBD,GAAS,MACzD,WAAYC,EAASD,GAAS,MAAQ,EACtC,aAAcJ,GAAS,OAAO,cAAgB,KAChD,CAAC,EACKQ,EACJ,OAAOb,GAAmB,YAAe,SACrCA,GAAmB,WACnBA,GAAmB,aAAa,OAAOM,CAAK,CAAC,GAAK,GACxD,OACErC,EAAC,OAAI,UAAU,iCACb,UAAAA,EAACU,EAAA,CACC,UAAW,iPACX,QAAS,IAAMgB,EAAiB,CAAE,GAAGD,EAAe,CAACY,CAAK,EAAG,CAACZ,IAAgBY,CAAK,CAAE,CAAC,EAEtF,UAAArC,EAAC,OAAI,UAAU,oDACb,UAAAD,EAAC,OACC,UAAU,mGACV,MAAOwB,IAASc,CAAK,GAAG,KAEvB,SAAAd,IAASc,CAAK,GAAG,MAAQ,GAC5B,EACAtC,EAAC,OACC,MAAM,6BACN,MAAM,KACN,OAAO,KACP,QAAQ,YACR,KAAK,OACL,UAAU,eAEV,SAAAA,EAAC,QACC,EAAE,wBACF,OAAO,UACP,eAAa,IACb,iBAAe,QACf,kBAAgB,QAClB,EACF,GACF,EACAA,EAACE,EAAA,CACC,MAAOoC,EACP,KAAMjB,GAAW,SACjB,OAAQG,EACR,aAAcA,EACd,UAAWC,EACX,QAASC,EACT,WAAYC,EACd,GACF,EACA3B,EAAC,OAAI,UAAU,gFACb,SAAAA,EAACU,EAAA,CACC,OAAQ+B,GAAS,OAAO,KAAO,GAC/B,UAAU,gCACV,aAAa,yEACf,EACF,EACCA,GAAS,iBACRxC,EAAC,OAAI,UAAU,oEACb,UAAAD,EAAC,OAAI,UAAU,sCAAuC,SAAA2C,GAAS,GAAG,EACjEC,GACC5C,EAAC,OAAI,UAAU,yFACZ,SAAA4C,EACH,GAEJ,EAEA,GAEDC,EACC7C,EAACY,EAAA,CACC,QAAS,IAAM,CACbU,IAAWe,EAASC,CAAK,CAC3B,EACA,UAAU,wBAET,SAAAO,EACH,EACE,MACN,CAEJ,EAEMC,EAAcC,GAAW,CAC7B,GAAKA,EACL,OAAIA,GAAK,OAAOA,GAAM,SAElB9C,EAAC,OAAI,UAAU,YACb,UAAAD,EAAC,KACC,UAAU,uFACV,wBAAyB,CACvB,OAAQ+C,GAAG,MAAQ,EACrB,EACF,EACA/C,EAACU,EAAA,CACC,OAAQqC,GAAG,OACX,UAAU,qEACV,aAAa,6BACf,GACF,EAIF/C,EAAC,OAAI,UAAU,YACZ,SAAAiC,EAAWc,CAAC,EACX/C,EAACU,EAAA,CACC,OAAQqC,EACR,UAAU,qEACV,aAAa,6BACf,EAEA/C,EAAC,KACC,UAAU,uFACV,wBAAyB,CACvB,OAAQ+C,GAAK,EACf,EACF,EAEJ,CAEJ,EAEMC,EAAe5B,GACZA,EAAK,IAAI,CAAC6B,EAASC,IAAgB,CACxC,MAAMC,EAAmBD,IAAQ,EACjC,OACEjD,EAAC,OAEC,UAAW,yJAEX,UAAAD,EAACa,EAAA,CACC,GAAG,KACH,KAAMoC,GAAM,GACZ,UAAU,8IACZ,EACAjD,EAAC,OACC,UAAW,2JAEV,gBAAO,KAAKwB,CAAM,GAAG,MAAOgB,GAAiB,CAC5C,MAAMY,EAAc5B,IAASgB,CAAI,EAC3Ba,EAAetB,GAAW,OAAO,OACpCS,GAAcA,GAAM,SAAWY,GAAa,MAC/C,GAAG,SACH,OAAON,EAAWO,IAAeJ,CAAE,CAAC,CACtC,CAAC,EACH,IAlBKA,CAmBP,CAEJ,CAAC,EAIGK,EAAgBC,GAAc,CAClC,GAAI,CAAC/B,EAAQ,OACb,KAAM,CAAE,SAAAgC,EAAU,UAAAC,CAAU,EAAIF,EAEhC,OAAIE,EAEAxD,EAAAF,EAAA,CACE,UAAAE,EAAC,OACC,UAAW,6IAEV,UAAAsD,GAAM,OAASvD,EAACa,EAAA,CAAQ,GAAG,KAAK,KAAM0C,GAAM,OAAS,GAAI,UAAU,oCAAoC,EACxGvD,EAAC,OACC,UAAW,gKAEV,gBAAO,KAAKwB,CAAM,GAAG,IAAI,CAACgB,EAAcF,IAAkB,CACzD,MAAMc,EAAc5B,IAASgB,CAAI,EAC3BkB,EAAiBrC,GAAW,UAAU,OAAQmB,GAAcA,GAAM,SAAWY,GAAa,MAAM,EACtG,OAAOpD,EAAC,OAAgB,SAAAoC,EAAQ,CAAE,GAAGsB,EAAgB,IAAKN,GAAa,IAAK,KAAMZ,CAAK,EAAGF,CAAK,GAA9EE,CAAgF,CACnG,CAAC,EACH,GACF,EACCgB,GAAU,OAASR,EAAYQ,CAAQ,EAAI,MAC9C,EAGGR,EAAYQ,CAAQ,CAC7B,EAEA,OAAAzC,EAAoBI,EAAK,IAAMS,EAAS,OAAyB,EAEjErB,EAAU,IAAM,CACd,GAAI,CAACc,GAAW,UAAU,OAAQ,OAClC,MAAMsC,EAAO3B,GAAmB,KAAK,QAAQ,GAAG,GAAK,CAAC,EACtD,IAAI4B,EAAgB,CAAC,EACrBD,GAAM,UAAU,CAACE,EAAavB,IAAkB,CAC9C,MAAMwB,EAAWzC,GAAW,UAAU,OAAQmB,GAAc,CAE1D,GADgBA,GAAM,UAAU,OAAQO,GAAWA,GAAG,MAAQc,CAAG,EACpD,MAAO,EACtB,CAAC,EACGC,IACFF,EAAgB,CACd,GAAGA,EACH,CAACtB,CAAK,EAAG,CACP,IAAKuB,EACL,KAAMC,GAAU,KAChB,OAAQA,GAAU,MACpB,CACF,EAEJ,CAAC,EACDrC,EAAUmC,CAAa,CACzB,EAAG,CAACvC,CAAS,CAAC,EAEdd,EAAU,IAAM,CACd,GAAIgB,EAAU,CACZ,MAAMqC,EAAgB,OAAO,KAAKpC,GAAU,CAAC,CAAC,EAC9C,GAAIoC,GAAe,OAAS,EAAG,CAC7B,MAAMG,EAAYH,GAAe,QAAQ,EAAG,CAAC,EAC7C,IAAII,EAAgB,CAAC,EACrBD,GAAW,UAAWvB,GAAiB,CACrCwB,EAAgB,CAAE,GAAGA,EAAe,CAACxB,CAAI,EAAGhB,IAASgB,CAAI,CAAE,CAC7D,CAAC,EACDf,EAAUuC,CAAa,CACzB,CACF,CACF,EAAG,CAACzC,CAAQ,CAAC,EAGXvB,EAAC,OAAI,UAAU,oDAAoD,IAAK4B,EACrE,SAAAE,GAAU,KACT9B,EAAC,OAAI,UAAU,0DACZ,SAAA8B,GAAU,MAAM,MAAM,CAACU,EAAWF,IAE/BtC,EAAC,OAAgB,UAAU,+EACxB,SAAAsD,EAAad,CAAI,GADVF,CAEV,CAEH,EACH,EACE,KACN,CAEJ,CAAC,EAEDrB,EAAM,YAAc,QAEpB,IAAOgD,GAAQzD,EAAWS,CAAK",
|
|
6
|
+
"names": ["Fragment", "jsx", "jsxs", "DropDown", "useAiuiContext", "useMediaQuery", "useMemo", "useState", "useEffect", "withLayout", "formatVariantPrice", "Picture", "Text", "Button", "Heading", "React", "useImperativeHandle", "useRef", "Specs", "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", "normalNode", "v", "productNode", "st", "idx", "isFirstParameter", "currentData", "currentMenus", "childrenNode", "node", "subTitle", "isProduct", "currentProduct", "skus", "currentActive", "sku", "findData", "newActive", "newShowActive", "Specs_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Dialog as x,DialogContent as d}from"../../components/dialog.js";import{Picture as n,Text as l}from"../../components/index.js";import"../../helpers/index.js";const m=i=>{const{textVisible:s,extension:e,onCloseModal:o}=i;return t(x,{open:s,onOpenChange:()=>o(),children:t(d,{className:"z-[
|
|
1
|
+
import{jsx as t,jsxs as a}from"react/jsx-runtime";import{Dialog as x,DialogContent as d}from"../../components/dialog.js";import{Picture as n,Text as l}from"../../components/index.js";import"../../helpers/index.js";const m=i=>{const{textVisible:s,extension:e,onCloseModal:o}=i;return t(x,{open:s,onOpenChange:()=>o(),children:t(d,{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:a("div",{className:"tablet:rounded-2xl overflow-hidden rounded-lg md-tablet:flex md-tablet:flex-col",children:[t("div",{className:"min-h-[260px] w-full md-tablet:flex-1",children:t(n,{source:`${e?.textPcImg?.url||""} , ${e?.textMobileImg?.url||""} 767`,className:"size-full",imgClassName:"w-full h-full object-cover"})}),t("div",{className:"tablet:inset-x-8 tablet:top-8 absolute inset-x-4 top-4",children:t(l,{html:e?.textTitle,className:"tablet:text-[24px] text-[20px] font-bold leading-[1.2]"})}),t("div",{onClick:()=>o(),className:"absolute right-4 top-4 cursor-pointer",children:t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"25",viewBox:"0 0 24 25",fill:"none",children:t("g",{"clip-path":"url(#clip0_2548_10038)",children:t("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"})})})}),a("div",{className:"tablet:p-8 p-4 text-[#1D1D1F] tablet:max-h-60 md-tablet:flex-1 overflow-y-auto",children:[t(l,{html:e?.text,className:" tablet:text-2xl text-xl font-bold leading-[1.2]"}),t("br",{}),t(l,{html:e?.textDesc,className:"tablet:leading-[1.2] pt-1 text-base font-bold leading-[1.4]"})]})]})})})};export{m as TextModal};
|
|
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": "AA0BY,cAAAA,EAmBF,QAAAC,MAnBE,oBAzBZ,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,MAAmB,yBAenB,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,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": "AA0BY,cAAAA,EAmBF,QAAAC,MAnBE,oBAzBZ,OAAS,UAAAC,EAAQ,iBAAAC,MAAqB,6BACtC,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAC9B,MAAmB,yBAenB,MAAMC,EAAaC,GAAyB,CAC1C,KAAM,CAAE,YAAAC,EAAa,UAAAC,EAAW,aAAAC,CAAa,EAAIH,EAEjD,OACEP,EAACE,EAAA,CAAO,KAAMM,EAAa,aAAc,IAAME,EAAa,EAC1D,SAAAV,EAACG,EAAA,CAAc,UAAU,yJACvB,SAAAF,EAAC,OAAI,UAAU,kFACb,UAAAD,EAAC,OAAI,UAAU,wCACb,SAAAA,EAACI,EAAA,CACC,OAAQ,GAAGK,GAAW,WAAW,KAAO,EAAE,MAAMA,GAAW,eAAe,KAAO,EAAE,OACnF,UAAU,YACV,aAAa,6BACf,EACF,EACAT,EAAC,OAAI,UAAU,yDACb,SAAAA,EAACK,EAAA,CAAK,KAAMI,GAAW,UAAW,UAAU,yDAAyD,EACvG,EACAT,EAAC,OAAI,QAAS,IAAMU,EAAa,EAAG,UAAU,wCAC5C,SAAAV,EAAC,OAAI,MAAM,6BAA6B,MAAM,KAAK,OAAO,KAAK,QAAQ,YAAY,KAAK,OACtF,SAAAA,EAAC,KAAE,YAAU,yBACX,SAAAA,EAAC,QACC,EAAE,0gBACF,KAAK,QACP,EACF,EACF,EACF,EACAC,EAAC,OAAI,UAAU,iFACb,UAAAD,EAACK,EAAA,CAAK,KAAMI,GAAW,KAAM,UAAU,mDAAmD,EAC1FT,EAAC,OAAG,EACJA,EAACK,EAAA,CAAK,KAAMI,GAAW,SAAU,UAAU,8DAA8D,GAC3G,GACF,EACF,EACF,CAEJ",
|
|
6
6
|
"names": ["jsx", "jsxs", "Dialog", "DialogContent", "Picture", "Text", "TextModal", "props", "textVisible", "extension", "onCloseModal"]
|
|
7
7
|
}
|
package/dist/tokens/base.css
CHANGED
|
@@ -159,7 +159,11 @@
|
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
.swiper-pagination-bullet-active {
|
|
162
|
-
background-color: #000000
|
|
162
|
+
background-color: #000000;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
.swiper-custom-white .swiper-pagination-bullet-active {
|
|
166
|
+
background-color: #ffffff;
|
|
163
167
|
}
|
|
164
168
|
|
|
165
169
|
.tab-switch-wrap {
|
|
@@ -169,7 +173,7 @@
|
|
|
169
173
|
}
|
|
170
174
|
|
|
171
175
|
:focus-visible {
|
|
172
|
-
outline-width: 0!important;
|
|
176
|
+
outline-width: 0 !important;
|
|
173
177
|
outline-color:
|
|
174
|
-
rgba(15, 82, 159, 0)!important;
|
|
178
|
+
rgba(15, 82, 159, 0) !important;
|
|
175
179
|
}
|