@anker-in/headless-ui 1.0.19-temp-101015 → 1.0.19-temp-101016
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/CollectionShelves/CollectionShelvesItem.js +1 -1
- package/dist/cjs/biz-components/CollectionShelves/CollectionShelvesItem.js.map +2 -2
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrapItem.js +1 -1
- package/dist/cjs/biz-components/CollectionsFilters/FilterCardWrapItem.js.map +2 -2
- package/dist/esm/biz-components/CollectionShelves/CollectionShelvesItem.js +1 -1
- package/dist/esm/biz-components/CollectionShelves/CollectionShelvesItem.js.map +2 -2
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrapItem.js +1 -1
- package/dist/esm/biz-components/CollectionsFilters/FilterCardWrapItem.js.map +2 -2
- package/dist/esm/stories/tabs.stories.d.ts +0 -373
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var z=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},N=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of W(t))!q.call(e,c)&&c!==r&&f(e,c,{get:()=>t[c],enumerable:!(a=M(t,c))||a.enumerable});return e};var x=(e,t,r)=>(r=e!=null?z(V(e)):{},N(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),J=e=>N(f({},"__esModule",{value:!0}),e);var Z={};G(Z,{CollectionShelvesWrapItem:()=>Y});module.exports=J(Z);var s=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";var z=Object.create;var f=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var V=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var G=(e,t)=>{for(var r in t)f(e,r,{get:t[r],enumerable:!0})},N=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let c of W(t))!q.call(e,c)&&c!==r&&f(e,c,{get:()=>t[c],enumerable:!(a=M(t,c))||a.enumerable});return e};var x=(e,t,r)=>(r=e!=null?z(V(e)):{},N(t||!e||!e.__esModule?f(r,"default",{value:e,enumerable:!0}):r,e)),J=e=>N(f({},"__esModule",{value:!0}),e);var Z={};G(Z,{CollectionShelvesWrapItem:()=>Y});module.exports=J(Z);var s=require("react/jsx-runtime"),d=require("../../helpers/utils.js"),T=x(require("../../components/badge.js")),B=require("../../components/text.js"),y=x(require("../../components/button.js")),C=require("../../shared/track.js"),m=require("react"),b=x(require("../../components/picture.js")),D=require("../../components/heading.js"),$=require("../AiuiProvider/index.js"),F=require("../../shared/trackUrlRef.js"),O=require("../ShelfDisplay/shelfDisplay.js");const K="image",Q="collectio_shelves",X=999999999e-2,Y=({data:e,configuration:t})=>{const{itemShape:r}=t||{},{locale:a="us"}=(0,$.useAiuiContext)(),[c,P]=(0,m.useState)(""),I=(o,i,n)=>t?.event?.primaryButton?.(o,i+1,n),E=(o,i,n)=>t?.event?.secondaryButton?.(o,i+1,n),l=e?.variants?.find(o=>o?.sku===e?.sku)||e?.variants?.[0]||{},g=!l?.availableForSale||l?.price?.amount===X,j=t?.isShowTag,k=t?.isShowOriginalPrice,[S,A]=(0,m.useState)([]),[L,w]=(0,m.useState)(!1),h=l?.coupons?.[0],{price:U,basePrice:H,discount:p}=(0,O.formatVariantPrice)({locale:a,amount:k&&h?h.variant_price4wscode:l.price,baseAmount:k&&h?l.price:0,currencyCode:e?.price?.currencyCode||"USD"}),R=()=>{const o=e?.sku,i=e?.variants;return i?.find(v=>v?.sku===o)?.image?.url||i?.[0]?.image?.url||""},u=e?.custom_name||e?.title||e?.name,_=e?.custom_description||e?.description;return(0,m.useEffect)(()=>{let o=[];if(p){const n=`${p}${t?.metafields?.discounts?.off||""}`;o.push(n)}const i=e?.tags?.filter?.(n=>n?.startsWith?.("CLtag"))?.map?.(n=>n?.replace?.("CLtag:",""))?.slice?.(0,p?1:2);A(o.concat(i))},[p,t?.metafields?.discounts,e?.tags]),(0,m.useEffect)(()=>{const{infos:o}=l?.metafields||{},{productInfos:i,preRender:n}=e?.metafields||{},{shopCommon:v}=t?.metafields||{};P(o?.comingSoon||i?.comingSoon||n?.soldOut||v?.soldOut||"")},[e,l]),(0,s.jsx)("div",{className:(0,d.cn)(r==="rounded"?"rounded-2xl":"rounded-none","lg-desktop:aspect-h-[560] lg-desktop:aspect-w-[544] desktop:aspect-h-[448] desktop:aspect-w-[427] tablet:aspect-h-[400] tablet:aspect-w-[296]","relative bg-[#EAEAEC] tablet:hover:bg-[#FFFFFF] box-border w-full cursor-pointer overflow-hidden duration-300","md-tablet:h-[400px] collection-shelves-item",{"aiui-dark":e?.custom_theme==="dark"}),children:(0,s.jsxs)("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden",children:[(0,s.jsx)("div",{onMouseEnter:()=>w(!0),onMouseLeave:()=>w(!1),className:(0,d.cn)("desktop:p-6 relative inline-block w-full lg-desktop:h-[280px] desktop:h-[234px] h-[182px] overflow-hidden cursor-pointer"),children:(0,s.jsxs)("a",{"aria-label":u,target:t?.target,href:(0,F.trackUrlRef)(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${K}_${Q}`),onClick:()=>{(0,C.gaTrack)({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:[(0,s.jsx)(b.default,{alt:"",source:R(),className:"desktop:mt-6 mt-4 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto"}),(0,s.jsx)(b.default,{alt:"",source:e?.custom_image,className:(0,d.cn)(L?"opacity-100":"opacity-0","absolute inset-x-0 top-0 h-full object-cover [&_img]:size-full transition-all duration-300")})]})}),(0,s.jsxs)("div",{className:"overflow-hidden flex flex-col justify-end desktop:p-6 p-4 flex-1 collection-shelves-product-content",children:[j&&S?.length?(0,s.jsx)("div",{className:"mb-1 box-border flex flex-wrap gap-1 overflow-hidden",children:S?.map?.((o,i)=>(0,s.jsx)(T.default,{children:o},i))}):null,u?(0,s.jsx)(D.Heading,{as:"h3",title:u||"",html:u||"",className:"lg-desktop:text-2xl text-xl collection-shelves-product-title mb-1 line-clamp-2 text-info-primary font-semibold"}):null,_?(0,s.jsx)(B.Text,{size:2,html:_||"",className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 collection-shelves-product-description line-clamp-1 h-5 text-sm font-semibold text-info-primary"}):null,(0,s.jsx)("div",{className:"mb-2 mt-4 flex items-center",children:g?(0,s.jsx)("div",{className:"tablet:text-2xl text-info-primary text-xl font-semibold",children:c||""}):(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-semibold",children:l?.availableForSale&&U||""}),(0,s.jsx)("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-semibold line-through",children:l?.availableForSale&&H||""})]})}),(0,s.jsxs)("div",{className:(0,d.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?(0,s.jsx)(y.default,{variant:"secondary",onClick:()=>E(e,t?.index,t),className:`overflow-hidden font-semibold ${t.direction==="vertical"?"w-full":""} ${t?.shape==="rounded"?"rounded-2xl":""}`,children:t?.secondaryButton||""}):null,t?.primaryButton?(0,s.jsx)(y.default,{variant:"primary",disabled:g,onClick:()=>I(e,t?.index,t),className:`overflow-hidden font-semibold ${t.direction==="vertical"?"w-full":""} ${t?.shape==="rounded"?"rounded-2xl":""}`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};
|
|
2
2
|
//# sourceMappingURL=CollectionShelvesItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionShelves/CollectionShelvesItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useState, useEffect } from 'react'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from '../ShelfDisplay/shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'collectio_shelves'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const CollectionShelvesWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape } = configuration || {}\n const { locale = 'us' } = useAiuiContext()\n\n const [soldOutText, setSoldOutText] = 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 const [showTags, setShowTags] = useState<string[]>([])\n const [showImage, setShowImage] = useState<boolean>(false)\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 || data?.name\n const displayDescription = data?.custom_description || data?.description\n\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${configuration?.metafields?.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 }, [discount, configuration?.metafields?.discounts, data?.tags])\n\n useEffect(() => {\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n const { shopCommon } = configuration?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n }, [data, variant])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n 'desktop:aspect-h-[560] desktop:aspect-w-[544]
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,IAAA,eAAAC,EAAAH,GAoGU,IAAAI,EAAA,6BApGVC,EAAmB,kCACnBC,EAAkB,wCAClBC,EAAqB,oCACrBC,EAAmB,yCACnBC,EAAwB,iCACxBC,EAAoC,iBACpCC,EAAoB,0CACpBC,EAAwB,uCACxBC,EAA+B,oCAC/BC,EAA4B,uCAC5BC,EAAmC,2CAGnC,MAAMC,EAAgB,QAChBC,EAAgB,oBAEhBC,EAAiB,aAEVhB,EAA4B,CAAC,CAAE,KAAAiB,EAAM,cAAAC,CAAc,IAA0C,CACxG,KAAM,CAAE,UAAAC,CAAU,EAAID,GAAiB,CAAC,EAClC,CAAE,OAAAE,EAAS,IAAK,KAAI,kBAAe,EAEnC,CAACC,EAAaC,CAAc,KAAI,YAAiB,EAAE,EAEnDC,EAAkB,CAACC,EAA0BC,EAAeR,IAChEC,GAAe,OAAO,gBAAgBM,EAAQC,EAAQ,EAAGR,CAAI,EAEzDS,EAAoB,CAACF,EAA0BC,EAAeR,IAClEC,GAAe,OAAO,kBAAkBM,EAAQC,EAAQ,EAAGR,CAAI,EAE3DU,EAAUV,GAAM,UAAU,KAAMW,GAAcA,GAAM,MAAQX,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGY,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWX,EACrEc,EAAYZ,GAAe,UAC3Ba,EAAsBb,GAAe,oBAErC,CAACc,EAAUC,CAAW,KAAI,YAAmB,CAAC,CAAC,EAC/C,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EAGnDC,EAAST,GAAS,UAAU,CAAC,EAE7B,CAAE,MAAAU,EAAO,UAAAC,EAAW,SAAAC,CAAS,KAAI,sBAAmB,CACxD,OAAQnB,EACR,OAAQW,GAAuBK,EAASA,EAAO,qBAAuBT,EAAQ,MAC9E,WAAYI,GAAuBK,EAAST,EAAQ,MAAQ,EAC5D,aAAcV,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKuB,EAAY,IAAM,CACtB,MAAMC,EAAMxB,GAAM,IACZyB,EAAWzB,GAAM,SAEvB,OADgByB,GAAU,KAAMd,GAAcA,GAAM,MAAQa,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEMC,EAAe1B,GAAM,aAAeA,GAAM,OAASA,GAAM,KACzD2B,EAAqB3B,GAAM,oBAAsBA,GAAM,YAE7D,sBAAU,IAAM,CACd,IAAI4B,EAAuB,CAAC,EAC5B,GAAIN,EAAU,CACZ,MAAMO,EAAc,GAAGP,CAAQ,GAAGrB,GAAe,YAAY,WAAW,KAAO,EAAE,GACjF2B,EAAW,KAAKC,CAAW,CAC7B,CACA,MAAMC,EAAU9B,GAAM,MAClB,SAAUW,GAAiBA,GAAM,aAAa,OAAO,CAAC,GACtD,MAAOA,GAAiBA,GAAM,UAAU,SAAU,EAAE,CAAC,GACrD,QAAQ,EAAGW,EAAW,EAAI,CAAC,EAC/BN,EAAYY,EAAW,OAAOE,CAAO,CAAC,CACxC,EAAG,CAACR,EAAUrB,GAAe,YAAY,UAAWD,GAAM,IAAI,CAAC,KAE/D,aAAU,IAAM,CACd,KAAM,CAAE,MAAA+B,CAAM,EAAIrB,GAAS,YAAc,CAAC,EACpC,CAAE,aAAAsB,EAAc,UAAAC,CAAU,EAAIjC,GAAM,YAAc,CAAC,EACnD,CAAE,WAAAkC,CAAW,EAAIjC,GAAe,YAAc,CAAC,EACrDI,EAAe0B,GAAO,YAAcC,GAAc,YAAcC,GAAW,SAAWC,GAAY,SAAW,EAAE,CACjH,EAAG,CAAClC,EAAMU,CAAO,CAAC,KAGhB,OAAC,OAEC,aAAW,MACTR,IAAc,UAAY,cAAgB,eAC1C,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useState, useEffect } from 'react'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from '../ShelfDisplay/shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'collectio_shelves'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const CollectionShelvesWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape } = configuration || {}\n const { locale = 'us' } = useAiuiContext()\n\n const [soldOutText, setSoldOutText] = 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 const [showTags, setShowTags] = useState<string[]>([])\n const [showImage, setShowImage] = useState<boolean>(false)\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 || data?.name\n const displayDescription = data?.custom_description || data?.description\n\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${configuration?.metafields?.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 }, [discount, configuration?.metafields?.discounts, data?.tags])\n\n useEffect(() => {\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n const { shopCommon } = configuration?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n }, [data, variant])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-h-[560] lg-desktop:aspect-w-[544] desktop:aspect-h-[448] desktop:aspect-w-[427] tablet:aspect-h-[400] tablet:aspect-w-[296]',\n 'relative bg-[#EAEAEC] tablet:hover:bg-[#FFFFFF] box-border w-full cursor-pointer overflow-hidden duration-300',\n 'md-tablet:h-[400px] collection-shelves-item',\n {\n 'aiui-dark': data?.custom_theme === 'dark',\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden\">\n <div\n onMouseEnter={() => setShowImage(true)}\n onMouseLeave={() => setShowImage(false)}\n className={cn(\n 'desktop:p-6 relative inline-block w-full lg-desktop:h-[280px] desktop:h-[234px] h-[182px] overflow-hidden cursor-pointer'\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\n alt=\"\"\n source={handleUrl()}\n className=\"desktop:mt-6 mt-4 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto\"\n />\n <Picture\n alt=\"\"\n source={data?.custom_image}\n className={cn(\n showImage ? 'opacity-100' : 'opacity-0',\n 'absolute inset-x-0 top-0 h-full object-cover [&_img]:size-full transition-all duration-300'\n )}\n />\n </a>\n </div>\n <div className=\"overflow-hidden flex flex-col justify-end desktop:p-6 p-4 flex-1 collection-shelves-product-content\">\n {isShowTag && showTags?.length ? (\n <div className=\"mb-1 box-border flex flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n html={displayTitle || ''}\n className=\"lg-desktop:text-2xl text-xl collection-shelves-product-title mb-1 line-clamp-2 text-info-primary font-semibold\"\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 collection-shelves-product-description line-clamp-1 h-5 text-sm font-semibold text-info-primary\"\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-semibold\">{soldOutText || ''}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-semibold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-semibold 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={`overflow-hidden font-semibold ${configuration.direction === 'vertical' ? 'w-full' : ''} ${configuration?.shape === 'rounded' ? 'rounded-2xl' : ''}`}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n disabled={isSoldOut}\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`overflow-hidden font-semibold ${configuration.direction === 'vertical' ? 'w-full' : ''} ${configuration?.shape === 'rounded' ? 'rounded-2xl' : ''}`}\n >\n {configuration?.primaryButton || ''}\n </Button>\n ) : null}\n </div>\n </div>\n </div>\n </div>\n )\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,+BAAAE,IAAA,eAAAC,EAAAH,GAoGU,IAAAI,EAAA,6BApGVC,EAAmB,kCACnBC,EAAkB,wCAClBC,EAAqB,oCACrBC,EAAmB,yCACnBC,EAAwB,iCACxBC,EAAoC,iBACpCC,EAAoB,0CACpBC,EAAwB,uCACxBC,EAA+B,oCAC/BC,EAA4B,uCAC5BC,EAAmC,2CAGnC,MAAMC,EAAgB,QAChBC,EAAgB,oBAEhBC,EAAiB,aAEVhB,EAA4B,CAAC,CAAE,KAAAiB,EAAM,cAAAC,CAAc,IAA0C,CACxG,KAAM,CAAE,UAAAC,CAAU,EAAID,GAAiB,CAAC,EAClC,CAAE,OAAAE,EAAS,IAAK,KAAI,kBAAe,EAEnC,CAACC,EAAaC,CAAc,KAAI,YAAiB,EAAE,EAEnDC,EAAkB,CAACC,EAA0BC,EAAeR,IAChEC,GAAe,OAAO,gBAAgBM,EAAQC,EAAQ,EAAGR,CAAI,EAEzDS,EAAoB,CAACF,EAA0BC,EAAeR,IAClEC,GAAe,OAAO,kBAAkBM,EAAQC,EAAQ,EAAGR,CAAI,EAE3DU,EAAUV,GAAM,UAAU,KAAMW,GAAcA,GAAM,MAAQX,GAAM,GAAG,GAAKA,GAAM,WAAW,CAAC,GAAK,CAAC,EAElGY,EAAY,CAACF,GAAS,kBAAoBA,GAAS,OAAO,SAAWX,EACrEc,EAAYZ,GAAe,UAC3Ba,EAAsBb,GAAe,oBAErC,CAACc,EAAUC,CAAW,KAAI,YAAmB,CAAC,CAAC,EAC/C,CAACC,EAAWC,CAAY,KAAI,YAAkB,EAAK,EAGnDC,EAAST,GAAS,UAAU,CAAC,EAE7B,CAAE,MAAAU,EAAO,UAAAC,EAAW,SAAAC,CAAS,KAAI,sBAAmB,CACxD,OAAQnB,EACR,OAAQW,GAAuBK,EAASA,EAAO,qBAAuBT,EAAQ,MAC9E,WAAYI,GAAuBK,EAAST,EAAQ,MAAQ,EAC5D,aAAcV,GAAM,OAAO,cAAgB,KAC7C,CAAC,EAEKuB,EAAY,IAAM,CACtB,MAAMC,EAAMxB,GAAM,IACZyB,EAAWzB,GAAM,SAEvB,OADgByB,GAAU,KAAMd,GAAcA,GAAM,MAAQa,CAAG,GAC/C,OAAO,KAAOC,IAAW,CAAC,GAAG,OAAO,KAAO,EAC7D,EAEMC,EAAe1B,GAAM,aAAeA,GAAM,OAASA,GAAM,KACzD2B,EAAqB3B,GAAM,oBAAsBA,GAAM,YAE7D,sBAAU,IAAM,CACd,IAAI4B,EAAuB,CAAC,EAC5B,GAAIN,EAAU,CACZ,MAAMO,EAAc,GAAGP,CAAQ,GAAGrB,GAAe,YAAY,WAAW,KAAO,EAAE,GACjF2B,EAAW,KAAKC,CAAW,CAC7B,CACA,MAAMC,EAAU9B,GAAM,MAClB,SAAUW,GAAiBA,GAAM,aAAa,OAAO,CAAC,GACtD,MAAOA,GAAiBA,GAAM,UAAU,SAAU,EAAE,CAAC,GACrD,QAAQ,EAAGW,EAAW,EAAI,CAAC,EAC/BN,EAAYY,EAAW,OAAOE,CAAO,CAAC,CACxC,EAAG,CAACR,EAAUrB,GAAe,YAAY,UAAWD,GAAM,IAAI,CAAC,KAE/D,aAAU,IAAM,CACd,KAAM,CAAE,MAAA+B,CAAM,EAAIrB,GAAS,YAAc,CAAC,EACpC,CAAE,aAAAsB,EAAc,UAAAC,CAAU,EAAIjC,GAAM,YAAc,CAAC,EACnD,CAAE,WAAAkC,CAAW,EAAIjC,GAAe,YAAc,CAAC,EACrDI,EAAe0B,GAAO,YAAcC,GAAc,YAAcC,GAAW,SAAWC,GAAY,SAAW,EAAE,CACjH,EAAG,CAAClC,EAAMU,CAAO,CAAC,KAGhB,OAAC,OAEC,aAAW,MACTR,IAAc,UAAY,cAAgB,eAC1C,gJACA,gHACA,8CACA,CACE,YAAaF,GAAM,eAAiB,MACtC,CACF,EAEA,oBAAC,OAAI,UAAU,4EACb,oBAAC,OACC,aAAc,IAAMkB,EAAa,EAAI,EACrC,aAAc,IAAMA,EAAa,EAAK,EACtC,aAAW,MACT,0HACF,EAEA,oBAAC,KACC,aAAYQ,EACZ,OAAQzB,GAAe,OACvB,QAAM,eACJ,GAAGE,IAAW,MAAQ,CAACA,EAAS,GAAK,IAAIA,CAAM,EAAE,aAAaH,GAAM,MAAM,GAC1E,GAAGH,CAAa,IAAIC,CAAa,EACnC,EACA,QAAS,IAAM,IACb,WAAQ,CACN,MAAO,WACP,WAAY,cACZ,iBAAkB,CAChB,WAAY,YACZ,eAAgB,mBAChB,MAAO,CACL,CACE,QAASE,GAAM,KAAOU,GAAS,IAC/B,UAAWV,GAAM,KACjB,aAAcU,GAAS,KACvB,MAAOA,GAAS,MAChB,MAAOT,GAAe,MAAQ,CAChC,CACF,CACF,CACF,CAAC,CACH,EAEA,oBAAC,EAAAkC,QAAA,CACC,IAAI,GACJ,OAAQZ,EAAU,EAClB,UAAU,0FACZ,KACA,OAAC,EAAAY,QAAA,CACC,IAAI,GACJ,OAAQnC,GAAM,aACd,aAAW,MACTiB,EAAY,cAAgB,YAC5B,4FACF,EACF,GACF,EACF,KACA,QAAC,OAAI,UAAU,sGACZ,UAAAJ,GAAaE,GAAU,UACtB,OAAC,OAAI,UAAU,uDACZ,SAAAA,GAAU,MAAM,CAACJ,EAAWH,OAAkB,OAAC,EAAA4B,QAAA,CAAmB,SAAAzB,GAARH,CAAa,CAAQ,EAClF,EACE,KACHkB,KACC,OAAC,WACC,GAAG,KACH,MAAOA,GAAgB,GACvB,KAAMA,GAAgB,GACtB,UAAU,iHACZ,EACE,KACHC,KACC,OAAC,QACC,KAAM,EACN,KAAMA,GAAsB,GAC5B,UAAU,uKACZ,EACE,QACJ,OAAC,OAAI,UAAU,8BACZ,SAAAf,KACC,OAAC,OAAI,UAAU,0DAA2D,SAAAR,GAAe,GAAG,KAE5F,oBACE,oBAAC,OAAI,UAAU,sEACZ,SAAAM,GAAS,kBAAmBU,GAAS,GACxC,KACA,OAAC,OAAI,UAAU,0FACZ,SAAAV,GAAS,kBAAmBW,GAAa,GAC5C,GACF,EAEJ,KAEA,QAAC,OACC,aAAW,MACT,0BACA,2CACApB,EAAc,YAAc,WAAa,WAAa,EACxD,EAEC,UAAAA,GAAe,mBACd,OAAC,EAAAoC,QAAA,CACC,QAAQ,YACR,QAAS,IAAM5B,EAAkBT,EAAMC,GAAe,MAAOA,CAAa,EAC1E,UAAW,iCAAiCA,EAAc,YAAc,WAAa,SAAW,EAAE,IAAIA,GAAe,QAAU,UAAY,cAAgB,EAAE,GAE5J,SAAAA,GAAe,iBAAmB,GACrC,EACE,KACHA,GAAe,iBACd,OAAC,EAAAoC,QAAA,CACC,QAAQ,UACR,SAAUzB,EACV,QAAS,IAAMN,EAAgBN,EAAMC,GAAe,MAAOA,CAAa,EACxE,UAAW,iCAAiCA,EAAc,YAAc,WAAa,SAAW,EAAE,IAAIA,GAAe,QAAU,UAAY,cAAgB,EAAE,GAE5J,SAAAA,GAAe,eAAiB,GACnC,EACE,MACN,GACF,GACF,GA7HKD,GAAM,IAAMA,GAAM,MA8HzB,CAEJ",
|
|
6
6
|
"names": ["CollectionShelvesItem_exports", "__export", "CollectionShelvesWrapItem", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_badge", "import_text", "import_button", "import_track", "import_react", "import_picture", "import_heading", "import_AiuiProvider", "import_trackUrlRef", "import_shelfDisplay", "componentType", "componentName", "SOLD_OUT_PRICE", "data", "configuration", "itemShape", "locale", "soldOutText", "setSoldOutText", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "showTags", "setShowTags", "showImage", "setShowImage", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "infos", "productInfos", "preRender", "shopCommon", "Picture", "Badge", "Button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var ve=Object.create;var h=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var ke=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var
|
|
1
|
+
"use strict";var ve=Object.create;var h=Object.defineProperty;var he=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var ke=Object.getPrototypeOf,Ce=Object.prototype.hasOwnProperty;var _e=(e,r)=>{for(var n in r)h(e,n,{get:r[n],enumerable:!0})},U=(e,r,n,g)=>{if(r&&typeof r=="object"||typeof r=="function")for(let m of ye(r))!Ce.call(e,m)&&m!==n&&h(e,m,{get:()=>r[m],enumerable:!(g=he(r,m))||g.enumerable});return e};var N=(e,r,n)=>(n=e!=null?ve(ke(e)):{},U(r||!e||!e.__esModule?h(n,"default",{value:e,enumerable:!0}):n,e)),Ne=e=>U(h({},"__esModule",{value:!0}),e);var $e={};_e($e,{default:()=>Te});module.exports=Ne($e);var t=require("react/jsx-runtime"),f=require("../../helpers/utils.js"),E=require("../AiuiProvider/index.js"),R=require("../ShelfDisplay/shelfDisplay.js"),V=N(require("../../components/badge.js")),Be=require("../../components/heading.js"),q=require("../../components/text.js"),P=N(require("../../components/button.js")),T=N(require("../../components/picture.js")),y=require("../../shared/trackUrlRef.js"),G=require("./component/price.js"),l=require("react");const S="image",w="product_shelf",Se=999999999e-2,we=e=>{let r;return e?.includes("products")?r=e?.split("products")[0]+"files/":r=e?.replace(e?.split("files")?.pop()||"","")+"/",r},Pe=({data:e,isSale:r=!1,buttonText:n,itemShape:g,metafields:m,onPrimaryChange:J,onSecondaryChange:K})=>{const{memberPriceDiscount:Q,memberSetting:$,discounts:I,shopCommon:X}=m,[d,B]=(0,l.useState)(""),[Y,M]=(0,l.useState)(""),[b,L]=(0,l.useState)(""),[z,Z]=(0,l.useState)(!1),[F,ee]=(0,l.useState)({}),[te,se]=(0,l.useState)(!1),[k,oe]=(0,l.useState)({price:"",basePrice:""}),[O,re]=(0,l.useState)([]),[ie,le]=(0,l.useState)([]),[x,ne]=(0,l.useState)(""),[ae,ce]=(0,l.useState)(""),{locale:a="us",currencyCode:me,isLogin:j}=(0,E.useAiuiContext)(),C=e?.custom_name||e?.title||e?.name,D=e?.custom_description||e?.description||e?.descriptionHtml,c=e?.filter_variants||e?.variants||[],de=s=>L(s),_=(s,i,o,u)=>{se(u),ne(s||""),oe({basePrice:i||"",price:o||""})};return(0,l.useEffect)(()=>{if(b){const o=c?.find(u=>u?.name?.includes?.(b));B(o?.sku||c?.[0]?.sku||""),M(o?.image?.url||c?.[0]?.image?.url||"");return}const s=e?.options?.find(o=>o?.displayName==="color")?.values?.[0]?.label;s&&L(s);const i=c?.find(o=>o?.name?.includes?.(s));B(i?.sku||c?.[0]?.sku||""),M(i?.image?.url||c?.[0]?.image?.url||"")},[b]),(0,l.useEffect)(()=>{if(!d)return;re(e?.tags||[]);const s=c?.find(p=>p?.sku===d)||c?.[0]||{};ee(s),Z(!s?.availableForSale||s?.price?.amount===Se);const{infos:i}=s?.metafields||{},{productInfos:o,preRender:u}=e?.metafields||{};ce(i?.comingSoon||o?.comingSoon||u?.soldOut||X?.soldOut||"");const v=s?.coupons?.[0],{price:H,basePrice:W,discount:ue,discountAmount:pe}=(0,R.formatVariantPrice)({locale:a,amount:v?v.variant_price4wscode:s.price,baseAmount:v?s.price:0,currencyCode:e?.price?.currencyCode||"USD"}),A=(v?.value_type==="fixed_amount"?pe:ue)||"";if(j){const p=(0,G.getFunctionMemberPrice)({locale:a,variant:s,shopMemberPriceDiscountConfig:Q,currencyCode:me||e?.price?.currencyCode||"USD"});if(p){const{hasMemberPrice:fe,salePriceWithCurrency:ge,originalPriceWithCurrency:be,savePriceWithCurrency:xe}=p;_(xe||"",be||"",fe?ge:"",p?.hasMemberPrice)}else _(A,W||"",H||"",!1)}else _(A,W||"",H||"",!1)},[e,d]),(0,l.useEffect)(()=>{let s=[];if(x){const o=`${x}${I?.off}`;s.push(o)}const i=O?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,x?1:2);le(s.concat(i))},[O,x]),r&&!k?.basePrice&&!e?.mImage?null:(0,t.jsx)("div",{className:(0,f.cn)(g==="round"?"rounded-2xl":"rounded-none","lg-desktop:h-[493px] laptop:h-[433px] h-[398px] relative tablet:hover:bg-info-white","bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300",{"aiui-dark":e.theme==="dark"}),children:e?.mImage?(0,t.jsx)("div",{className:"absolute inset-0 box-border overflow-hidden hover:[&_img]:scale-105",children:(0,t.jsx)("div",{className:"relative inset-0 size-full",children:(0,t.jsxs)("a",{className:"size-full",href:(0,y.trackUrlRef)(e?.link,`${S}_${w}`),children:[(0,t.jsx)(T.default,{alt:"",source:e?.mImage?.url||e?.mImage,className:"size-full [&_img]:object-cover [&_img]:size-full",imgClassName:"size-full object-cover transition-all duration-300"}),(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4",children:[(0,t.jsx)("p",{className:"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-semibold",dangerouslySetInnerHTML:{__html:e?.subTitle}}),(0,t.jsx)("span",{className:"text-info-secondary desktop:text-[32px] text-[20px] font-semibold desktop:leading-9 line-clamp-4",dangerouslySetInnerHTML:{__html:e?.title}})]})]})})}):(0,t.jsxs)("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden tablet:p-4 p-2 pb-4",children:[(0,t.jsx)("div",{className:"flex flex-wrap gap-1 overflow-hidden collection-filter-tags",children:ie?.map?.((s,i)=>(0,t.jsx)(V.default,{className:"whitespace-nowrap max-w-full truncate px-1 box-border font-semibold item-badge",children:s},i))}),(0,t.jsx)("a",{target:"_blank","aria-label":C,href:(0,y.trackUrlRef)(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${S}_${w}`),children:(0,t.jsx)("div",{className:(0,f.cn)("my-1 m-auto desktop:size-[196px] size-[120px] overflow-hidden"),children:(0,t.jsx)(T.default,{alt:"",source:Y,className:"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit"})})}),e?.options?.map(s=>{if(s?.displayName==="color")return(0,t.jsx)("div",{className:"flex items-center gap-1",children:s?.values?.map(i=>{const o=i?.hexColors?i.hexColors?.[0]:i?.label;return(0,t.jsx)("button",{onClick:()=>de(i?.label),className:(0,f.cn)("size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent",`${b===i?.label?"border-[#00BEFA]":""}`),children:(0,t.jsx)("img",{alt:o,className:"h-full w-full object-cover",src:`${we(e?.images?.[0]?.url)}${o?.toLowerCase().split(" ")?.join("-")}_50x.png`})},i?.label)})})}),(0,t.jsxs)("div",{children:[C?(0,t.jsx)("span",{dangerouslySetInnerHTML:{__html:C||""},className:"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:test-xl test-base font-semibold"}):null,e?.metafields?.judgemeBadge?(0,t.jsx)("a",{target:"_blank",className:"font-semibold text-xs [&_.jdgm-star]:text-[#F77234]",dangerouslySetInnerHTML:{__html:e?.metafields?.judgemeBadge},href:(0,y.trackUrlRef)(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${S}_${w}`)}):null,D?(0,t.jsx)(q.Text,{size:2,html:D||"",className:"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-semibold"}):null,(0,t.jsxs)("div",{className:"mt-3 mb-2",children:[(0,t.jsx)("p",{dangerouslySetInnerHTML:{__html:j&&te&&(I?.memberPrice||$?.member_price||$?.plus_member_price)||""},className:"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-semibold"}),(0,t.jsx)("div",{className:"flex items-center",children:z?(0,t.jsx)("div",{className:"desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold",children:ae||""}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("div",{className:"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold",children:F?.availableForSale&&k?.price||""}),(0,t.jsx)("div",{className:"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-semibold line-through",children:F?.availableForSale&&k?.basePrice||""})]})})]}),(0,t.jsxs)("div",{className:(0,f.cn)("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col"),children:[(0,t.jsx)(P.default,{variant:"secondary",className:"m-tablet:w-full",onClick:()=>K?.(e,d),children:n?.secondaryButton||"Learn More"}),(0,t.jsx)(P.default,{variant:"primary",className:"m-tablet:w-full",disabled:z,onClick:()=>J?.(e,d),children:n?.primaryButton||"Shop Now"})]})]})]})},e?.id||e?.handle)};var Te=Pe;
|
|
2
2
|
//# sourceMappingURL=FilterCardWrapItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionsFilters/FilterCardWrapItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getFunctionMemberPrice } from './component/price.js'\nimport { useState, useEffect } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst getShopifyCdnBaseUrl = (imagePath: string | null) => {\n // \u76EE\u524D\u77E5\u9053\u7684 shopify \u56FE\u7247\u8DEF\u7531\u7684\u5F62\u5F0F\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/files/Group_5581_2.jpg?v=1662379184\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/products/B2633123.jpg?v=1631264041_3840x\n // \u8FD4\u56DE https://cdn.shopify.com/s/files/1/0493/9834/9974/files/\n let path\n if (imagePath?.includes('products')) {\n path = imagePath?.split('products')[0] + 'files/'\n } else {\n path = imagePath?.replace(imagePath?.split('files')?.pop() || '', '') + '/'\n }\n return path\n}\n\ntype FilterCardWrapItemProps = {\n data: any\n isSale?: boolean\n buttonText?: any\n itemShape?: string\n metafields: any\n onPrimaryChange?: (item: any, sku: string) => void\n onSecondaryChange?: (item: any, sku: string) => void\n}\n\nconst FilterCardWrapItem = ({\n data,\n isSale = false,\n buttonText,\n itemShape,\n metafields,\n onPrimaryChange,\n onSecondaryChange,\n}: FilterCardWrapItemProps) => {\n const { memberPriceDiscount, memberSetting, discounts, shopCommon } = metafields\n const [currentSku, setCurrentSku] = useState<string>('')\n const [currentImage, setCurrentImage] = useState<string>('')\n const [selectedColor, setSelectedColor] = useState<string>('')\n const [isSoldOut, setIsSoldOut] = useState<any>(false)\n const [currentVariant, setCurrentVariant] = useState<any>({})\n const [plusMemberStatus, setPlusMemberStatus] = useState<boolean>(false)\n const [priceCollection, setPriceCollection] = useState<{ price: string; basePrice: string }>({\n price: '',\n basePrice: '',\n })\n const [tags, setTags] = useState<string[]>([])\n const [showTags, setShowTags] = useState<string[]>([])\n const [discountCollection, setDiscountCollection] = useState<string>('')\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const { locale = 'us', currencyCode, isLogin } = useAiuiContext()\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description || data?.descriptionHtml\n const skuArray = data?.filter_variants || data?.variants || []\n\n const onColorClick = (color: string) => setSelectedColor(color)\n\n const handleBasePrice = (discount: string, priceCurrency: string, salePrice: string, status: boolean) => {\n setPlusMemberStatus(status)\n setDiscountCollection(discount || '')\n setPriceCollection({\n basePrice: priceCurrency || '',\n price: salePrice || '',\n })\n }\n\n useEffect(() => {\n if (selectedColor) {\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(selectedColor))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n return\n }\n const firstOption = data?.options?.find((item: any) => item?.displayName === 'color')?.values?.[0]?.label\n firstOption && setSelectedColor(firstOption)\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(firstOption))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n }, [selectedColor])\n\n useEffect(() => {\n if (!currentSku) return\n setTags(data?.tags || [])\n const variant = skuArray?.find((item: any) => item?.sku === currentSku) || skuArray?.[0] || {}\n setCurrentVariant(variant)\n setIsSoldOut(!variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE)\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n const { price, basePrice, discount, discountAmount } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n const showPrice = (coupon?.value_type === 'fixed_amount' ? discountAmount : discount) || ''\n // \u4F1A\u5458\u6298\u6263\n if (isLogin) {\n const result = getFunctionMemberPrice({\n locale: locale,\n variant: variant,\n shopMemberPriceDiscountConfig: memberPriceDiscount,\n currencyCode: currencyCode || data?.price?.currencyCode || 'USD',\n })\n if (result) {\n const { hasMemberPrice, salePriceWithCurrency, originalPriceWithCurrency, savePriceWithCurrency } = result\n handleBasePrice(\n savePriceWithCurrency || '',\n originalPriceWithCurrency || '',\n hasMemberPrice ? salePriceWithCurrency : '',\n result?.hasMemberPrice\n )\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n }, [data, currentSku])\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discountCollection) {\n const discountTag = `${discountCollection}${discounts?.off}`\n handleTags.push(discountTag)\n }\n const newTags = tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discountCollection ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [tags, discountCollection])\n\n if (isSale && !priceCollection?.basePrice && !data?.mImage) {\n return null\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:h-[493px] laptop:h-[433px] h-[398px] relative tablet:hover:bg-info-white',\n 'bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n {data?.mImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden hover:[&_img]:scale-105\">\n <div className=\"relative inset-0 size-full\">\n <a className=\"size-full\" href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}>\n <Picture\n alt=\"\"\n source={data?.mImage?.url || data?.mImage}\n className=\"size-full [&_img]:object-cover [&_img]:size-full\"\n imgClassName=\"size-full object-cover transition-all duration-300\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4\">\n <p\n className=\"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-semibold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n />\n <span\n className=\"text-info-secondary desktop:text-[32px] text-[20px] font-semibold desktop:leading-9 line-clamp-4\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n />\n </div>\n </a>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden tablet:p-4 p-2 pb-4\">\n <div className=\"flex flex-wrap gap-1 overflow-hidden collection-filter-tags\">\n {showTags?.map?.((item: string, index: number) => (\n <Badge\n key={index}\n className=\"whitespace-nowrap max-w-full truncate px-1 box-border font-semibold item-badge\"\n >\n {item}\n </Badge>\n ))}\n </div>\n <a\n target=\"_blank\"\n aria-label={displayTitle}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <div className={cn('my-1 m-auto desktop:size-[196px] size-[120px] overflow-hidden')}>\n <Picture\n alt=\"\"\n source={currentImage}\n className=\"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit\"\n />\n </div>\n </a>\n {data?.options?.map((option: any) => {\n if (option?.displayName === 'color') {\n return (\n <div className=\"flex items-center gap-1\">\n {option?.values?.map((item: any) => {\n const color = item?.hexColors ? item.hexColors?.[0] : item?.label\n return (\n <button\n key={item?.label}\n onClick={() => onColorClick(item?.label)}\n className={cn(\n 'size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent',\n `${selectedColor === item?.label ? 'border-[#00BEFA]' : ''}`\n )}\n >\n <img\n alt={color}\n className=\"h-full w-full object-cover\"\n src={`${getShopifyCdnBaseUrl(data?.images?.[0]?.url)}${color\n ?.toLowerCase()\n .split(' ')\n ?.join('-')}_${'50x'}.png`}\n />\n </button>\n )\n })}\n </div>\n )\n }\n })}\n <div>\n {displayTitle ? (\n <Text\n size={2}\n html={displayTitle || ''}\n className=\"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:test-xl test-base font-semibold\"\n />\n ) : null}\n {data?.metafields?.judgemeBadge ? (\n <a\n target=\"_blank\"\n className=\"font-semibold text-xs [&_.jdgm-star]:text-[#F77234]\"\n dangerouslySetInnerHTML={{ __html: data?.metafields?.judgemeBadge }}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-semibold\"\n />\n ) : null}\n <div className=\"mt-3 mb-2\">\n <p\n dangerouslySetInnerHTML={{\n __html:\n isLogin && plusMemberStatus\n ? discounts?.memberPrice || memberSetting?.member_price || memberSetting?.plus_member_price || ''\n : '',\n }}\n className=\"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-semibold\"\n />\n <div className=\"flex items-center\">\n {isSoldOut ? (\n <div className=\"desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {soldOutText || ''}\n </div>\n ) : (\n <>\n <div className=\"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {currentVariant?.availableForSale ? priceCollection?.price || '' : ''}\n </div>\n <div className=\"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-semibold line-through\">\n {currentVariant?.availableForSale ? priceCollection?.basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col')}\n >\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full\"\n onClick={() => onSecondaryChange?.(data, currentSku)}\n >\n {buttonText?.secondaryButton || 'Learn More'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full\"\n disabled={isSoldOut}\n onClick={() => onPrimaryChange?.(data, currentSku)}\n >\n {buttonText?.primaryButton || 'Shop Now'}\n </Button>\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\nexport default FilterCardWrapItem\n"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getFunctionMemberPrice } from './component/price.js'\nimport { useState, useEffect } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst getShopifyCdnBaseUrl = (imagePath: string | null) => {\n // \u76EE\u524D\u77E5\u9053\u7684 shopify \u56FE\u7247\u8DEF\u7531\u7684\u5F62\u5F0F\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/files/Group_5581_2.jpg?v=1662379184\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/products/B2633123.jpg?v=1631264041_3840x\n // \u8FD4\u56DE https://cdn.shopify.com/s/files/1/0493/9834/9974/files/\n let path\n if (imagePath?.includes('products')) {\n path = imagePath?.split('products')[0] + 'files/'\n } else {\n path = imagePath?.replace(imagePath?.split('files')?.pop() || '', '') + '/'\n }\n return path\n}\n\ntype FilterCardWrapItemProps = {\n data: any\n isSale?: boolean\n buttonText?: any\n itemShape?: string\n metafields: any\n onPrimaryChange?: (item: any, sku: string) => void\n onSecondaryChange?: (item: any, sku: string) => void\n}\n\nconst FilterCardWrapItem = ({\n data,\n isSale = false,\n buttonText,\n itemShape,\n metafields,\n onPrimaryChange,\n onSecondaryChange,\n}: FilterCardWrapItemProps) => {\n const { memberPriceDiscount, memberSetting, discounts, shopCommon } = metafields\n const [currentSku, setCurrentSku] = useState<string>('')\n const [currentImage, setCurrentImage] = useState<string>('')\n const [selectedColor, setSelectedColor] = useState<string>('')\n const [isSoldOut, setIsSoldOut] = useState<any>(false)\n const [currentVariant, setCurrentVariant] = useState<any>({})\n const [plusMemberStatus, setPlusMemberStatus] = useState<boolean>(false)\n const [priceCollection, setPriceCollection] = useState<{ price: string; basePrice: string }>({\n price: '',\n basePrice: '',\n })\n const [tags, setTags] = useState<string[]>([])\n const [showTags, setShowTags] = useState<string[]>([])\n const [discountCollection, setDiscountCollection] = useState<string>('')\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const { locale = 'us', currencyCode, isLogin } = useAiuiContext()\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description || data?.descriptionHtml\n const skuArray = data?.filter_variants || data?.variants || []\n\n const onColorClick = (color: string) => setSelectedColor(color)\n\n const handleBasePrice = (discount: string, priceCurrency: string, salePrice: string, status: boolean) => {\n setPlusMemberStatus(status)\n setDiscountCollection(discount || '')\n setPriceCollection({\n basePrice: priceCurrency || '',\n price: salePrice || '',\n })\n }\n\n useEffect(() => {\n if (selectedColor) {\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(selectedColor))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n return\n }\n const firstOption = data?.options?.find((item: any) => item?.displayName === 'color')?.values?.[0]?.label\n firstOption && setSelectedColor(firstOption)\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(firstOption))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n }, [selectedColor])\n\n useEffect(() => {\n if (!currentSku) return\n setTags(data?.tags || [])\n const variant = skuArray?.find((item: any) => item?.sku === currentSku) || skuArray?.[0] || {}\n setCurrentVariant(variant)\n setIsSoldOut(!variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE)\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n const { price, basePrice, discount, discountAmount } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n const showPrice = (coupon?.value_type === 'fixed_amount' ? discountAmount : discount) || ''\n // \u4F1A\u5458\u6298\u6263\n if (isLogin) {\n const result = getFunctionMemberPrice({\n locale: locale,\n variant: variant,\n shopMemberPriceDiscountConfig: memberPriceDiscount,\n currencyCode: currencyCode || data?.price?.currencyCode || 'USD',\n })\n if (result) {\n const { hasMemberPrice, salePriceWithCurrency, originalPriceWithCurrency, savePriceWithCurrency } = result\n handleBasePrice(\n savePriceWithCurrency || '',\n originalPriceWithCurrency || '',\n hasMemberPrice ? salePriceWithCurrency : '',\n result?.hasMemberPrice\n )\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n }, [data, currentSku])\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discountCollection) {\n const discountTag = `${discountCollection}${discounts?.off}`\n handleTags.push(discountTag)\n }\n const newTags = tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discountCollection ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [tags, discountCollection])\n\n if (isSale && !priceCollection?.basePrice && !data?.mImage) {\n return null\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:h-[493px] laptop:h-[433px] h-[398px] relative tablet:hover:bg-info-white',\n 'bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n {data?.mImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden hover:[&_img]:scale-105\">\n <div className=\"relative inset-0 size-full\">\n <a className=\"size-full\" href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}>\n <Picture\n alt=\"\"\n source={data?.mImage?.url || data?.mImage}\n className=\"size-full [&_img]:object-cover [&_img]:size-full\"\n imgClassName=\"size-full object-cover transition-all duration-300\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4\">\n <p\n className=\"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-semibold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n />\n <span\n className=\"text-info-secondary desktop:text-[32px] text-[20px] font-semibold desktop:leading-9 line-clamp-4\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n />\n </div>\n </a>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden tablet:p-4 p-2 pb-4\">\n <div className=\"flex flex-wrap gap-1 overflow-hidden collection-filter-tags\">\n {showTags?.map?.((item: string, index: number) => (\n <Badge\n key={index}\n className=\"whitespace-nowrap max-w-full truncate px-1 box-border font-semibold item-badge\"\n >\n {item}\n </Badge>\n ))}\n </div>\n <a\n target=\"_blank\"\n aria-label={displayTitle}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <div className={cn('my-1 m-auto desktop:size-[196px] size-[120px] overflow-hidden')}>\n <Picture\n alt=\"\"\n source={currentImage}\n className=\"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit\"\n />\n </div>\n </a>\n {data?.options?.map((option: any) => {\n if (option?.displayName === 'color') {\n return (\n <div className=\"flex items-center gap-1\">\n {option?.values?.map((item: any) => {\n const color = item?.hexColors ? item.hexColors?.[0] : item?.label\n return (\n <button\n key={item?.label}\n onClick={() => onColorClick(item?.label)}\n className={cn(\n 'size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent',\n `${selectedColor === item?.label ? 'border-[#00BEFA]' : ''}`\n )}\n >\n <img\n alt={color}\n className=\"h-full w-full object-cover\"\n src={`${getShopifyCdnBaseUrl(data?.images?.[0]?.url)}${color\n ?.toLowerCase()\n .split(' ')\n ?.join('-')}_${'50x'}.png`}\n />\n </button>\n )\n })}\n </div>\n )\n }\n })}\n <div>\n {displayTitle ? (\n <span\n dangerouslySetInnerHTML={{ __html: displayTitle || '' }}\n className=\"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:test-xl test-base font-semibold\"\n />\n ) : null}\n {data?.metafields?.judgemeBadge ? (\n <a\n target=\"_blank\"\n className=\"font-semibold text-xs [&_.jdgm-star]:text-[#F77234]\"\n dangerouslySetInnerHTML={{ __html: data?.metafields?.judgemeBadge }}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-semibold\"\n />\n ) : null}\n <div className=\"mt-3 mb-2\">\n <p\n dangerouslySetInnerHTML={{\n __html:\n isLogin && plusMemberStatus\n ? discounts?.memberPrice || memberSetting?.member_price || memberSetting?.plus_member_price || ''\n : '',\n }}\n className=\"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-semibold\"\n />\n <div className=\"flex items-center\">\n {isSoldOut ? (\n <div className=\"desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {soldOutText || ''}\n </div>\n ) : (\n <>\n <div className=\"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {currentVariant?.availableForSale ? priceCollection?.price || '' : ''}\n </div>\n <div className=\"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-semibold line-through\">\n {currentVariant?.availableForSale ? priceCollection?.basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col')}\n >\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full\"\n onClick={() => onSecondaryChange?.(data, currentSku)}\n >\n {buttonText?.secondaryButton || 'Learn More'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full\"\n disabled={isSoldOut}\n onClick={() => onPrimaryChange?.(data, currentSku)}\n >\n {buttonText?.primaryButton || 'Shop Now'}\n </Button>\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\nexport default FilterCardWrapItem\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["FilterCardWrapItem_exports", "__export", "FilterCardWrapItem_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_badge", "import_heading", "import_text", "import_button", "import_picture", "import_trackUrlRef", "import_price", "import_react", "componentType", "componentName", "SOLD_OUT_PRICE", "getShopifyCdnBaseUrl", "imagePath", "path", "FilterCardWrapItem", "data", "isSale", "buttonText", "itemShape", "metafields", "onPrimaryChange", "onSecondaryChange", "memberPriceDiscount", "memberSetting", "discounts", "shopCommon", "currentSku", "setCurrentSku", "currentImage", "setCurrentImage", "selectedColor", "setSelectedColor", "isSoldOut", "setIsSoldOut", "currentVariant", "setCurrentVariant", "plusMemberStatus", "setPlusMemberStatus", "priceCollection", "setPriceCollection", "tags", "setTags", "showTags", "setShowTags", "discountCollection", "setDiscountCollection", "soldOutText", "setSoldOutText", "locale", "currencyCode", "isLogin", "displayTitle", "displayDescription", "skuArray", "onColorClick", "color", "handleBasePrice", "discount", "priceCurrency", "salePrice", "status", "findSku", "item", "firstOption", "variant", "infos", "productInfos", "preRender", "coupon", "price", "basePrice", "discountAmount", "showPrice", "result", "hasMemberPrice", "salePriceWithCurrency", "originalPriceWithCurrency", "savePriceWithCurrency", "handleTags", "discountTag", "newTags", "Picture", "index", "Badge", "option", "Button"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as W,jsx as o,jsxs as r}from"react/jsx-runtime";import{cn as
|
|
1
|
+
import{Fragment as W,jsx as o,jsxs as r}from"react/jsx-runtime";import{cn as d}from"../../helpers/utils.js";import I from"../../components/badge.js";import{Text as E}from"../../components/text.js";import g from"../../components/button.js";import{gaTrack as j}from"../../shared/track.js";import{useState as f,useEffect as k}from"react";import S from"../../components/picture.js";import{Heading as A}from"../../components/heading.js";import{useAiuiContext as L}from"../AiuiProvider/index.js";import{trackUrlRef as U}from"../../shared/trackUrlRef.js";import{formatVariantPrice as H}from"../ShelfDisplay/shelfDisplay.js";const R="image",z="collectio_shelves",M=999999999e-2,se=({data:e,configuration:t})=>{const{itemShape:w}=t||{},{locale:a="us"}=L(),[_,N]=f(""),T=(s,i,n)=>t?.event?.primaryButton?.(s,i+1,n),B=(s,i,n)=>t?.event?.secondaryButton?.(s,i+1,n),l=e?.variants?.find(s=>s?.sku===e?.sku)||e?.variants?.[0]||{},h=!l?.availableForSale||l?.price?.amount===M,C=t?.isShowTag,v=t?.isShowOriginalPrice,[x,D]=f([]),[$,y]=f(!1),p=l?.coupons?.[0],{price:F,basePrice:O,discount:c}=H({locale:a,amount:v&&p?p.variant_price4wscode:l.price,baseAmount:v&&p?l.price:0,currencyCode:e?.price?.currencyCode||"USD"}),P=()=>{const s=e?.sku,i=e?.variants;return i?.find(u=>u?.sku===s)?.image?.url||i?.[0]?.image?.url||""},m=e?.custom_name||e?.title||e?.name,b=e?.custom_description||e?.description;return k(()=>{let s=[];if(c){const n=`${c}${t?.metafields?.discounts?.off||""}`;s.push(n)}const i=e?.tags?.filter?.(n=>n?.startsWith?.("CLtag"))?.map?.(n=>n?.replace?.("CLtag:",""))?.slice?.(0,c?1:2);D(s.concat(i))},[c,t?.metafields?.discounts,e?.tags]),k(()=>{const{infos:s}=l?.metafields||{},{productInfos:i,preRender:n}=e?.metafields||{},{shopCommon:u}=t?.metafields||{};N(s?.comingSoon||i?.comingSoon||n?.soldOut||u?.soldOut||"")},[e,l]),o("div",{className:d(w==="rounded"?"rounded-2xl":"rounded-none","lg-desktop:aspect-h-[560] lg-desktop:aspect-w-[544] desktop:aspect-h-[448] desktop:aspect-w-[427] tablet:aspect-h-[400] tablet:aspect-w-[296]","relative bg-[#EAEAEC] tablet:hover:bg-[#FFFFFF] box-border w-full cursor-pointer overflow-hidden duration-300","md-tablet:h-[400px] collection-shelves-item",{"aiui-dark":e?.custom_theme==="dark"}),children:r("div",{className:"absolute inset-0 box-border flex flex-col justify-between overflow-hidden",children:[o("div",{onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),className:d("desktop:p-6 relative inline-block w-full lg-desktop:h-[280px] desktop:h-[234px] h-[182px] overflow-hidden cursor-pointer"),children:r("a",{"aria-label":m,target:t?.target,href:U(`${a==="us"||!a?"":`/${a}`}/products/${e?.handle}`,`${R}_${z}`),onClick:()=>{j({event:"ga4Event",event_name:"select_item",event_parameters:{page_group:"Home Page",item_list_name:"Home_Page_Bundle",items:[{item_id:e?.sku||l?.sku,item_name:e?.name,item_variant:l?.name,price:l?.price,index:t?.index+1}]}})},children:[o(S,{alt:"",source:P(),className:"desktop:mt-6 mt-4 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto"}),o(S,{alt:"",source:e?.custom_image,className:d($?"opacity-100":"opacity-0","absolute inset-x-0 top-0 h-full object-cover [&_img]:size-full transition-all duration-300")})]})}),r("div",{className:"overflow-hidden flex flex-col justify-end desktop:p-6 p-4 flex-1 collection-shelves-product-content",children:[C&&x?.length?o("div",{className:"mb-1 box-border flex flex-wrap gap-1 overflow-hidden",children:x?.map?.((s,i)=>o(I,{children:s},i))}):null,m?o(A,{as:"h3",title:m||"",html:m||"",className:"lg-desktop:text-2xl text-xl collection-shelves-product-title mb-1 line-clamp-2 text-info-primary font-semibold"}):null,b?o(E,{size:2,html:b||"",className:"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 collection-shelves-product-description line-clamp-1 h-5 text-sm font-semibold text-info-primary"}):null,o("div",{className:"mb-2 mt-4 flex items-center",children:h?o("div",{className:"tablet:text-2xl text-info-primary text-xl font-semibold",children:_||""}):r(W,{children:[o("div",{className:"final-price tablet:text-2xl text-info-primary text-xl font-semibold",children:l?.availableForSale&&F||""}),o("div",{className:"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-semibold line-through",children:l?.availableForSale&&O||""})]})}),r("div",{className:d("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2",t.direction==="vertical"?"flex-col":""),children:[t?.secondaryButton?o(g,{variant:"secondary",onClick:()=>B(e,t?.index,t),className:`overflow-hidden font-semibold ${t.direction==="vertical"?"w-full":""} ${t?.shape==="rounded"?"rounded-2xl":""}`,children:t?.secondaryButton||""}):null,t?.primaryButton?o(g,{variant:"primary",disabled:h,onClick:()=>T(e,t?.index,t),className:`overflow-hidden font-semibold ${t.direction==="vertical"?"w-full":""} ${t?.shape==="rounded"?"rounded-2xl":""}`,children:t?.primaryButton||""}):null]})]})]})},e?.id||e?.handle)};export{se as CollectionShelvesWrapItem};
|
|
2
2
|
//# sourceMappingURL=CollectionShelvesItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionShelves/CollectionShelvesItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useState, useEffect } from 'react'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from '../ShelfDisplay/shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'collectio_shelves'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const CollectionShelvesWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape } = configuration || {}\n const { locale = 'us' } = useAiuiContext()\n\n const [soldOutText, setSoldOutText] = 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 const [showTags, setShowTags] = useState<string[]>([])\n const [showImage, setShowImage] = useState<boolean>(false)\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 || data?.name\n const displayDescription = data?.custom_description || data?.description\n\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${configuration?.metafields?.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 }, [discount, configuration?.metafields?.discounts, data?.tags])\n\n useEffect(() => {\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n const { shopCommon } = configuration?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n }, [data, variant])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n 'desktop:aspect-h-[560] desktop:aspect-w-[544]
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Badge from '../../components/badge.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport { gaTrack } from '../../shared/track.js'\nimport { useState, useEffect } from 'react'\nimport Picture from '../../components/picture.js'\nimport { Heading } from '../../components/heading.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport type { ShelfDisplayItem, ShelfDisplayType } from '../ShelfDisplay/shelfDisplay.js'\n\nconst componentType = 'image'\nconst componentName = 'collectio_shelves'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nexport const CollectionShelvesWrapItem = ({ data, configuration }: { data: any; configuration?: any }) => {\n const { itemShape } = configuration || {}\n const { locale = 'us' } = useAiuiContext()\n\n const [soldOutText, setSoldOutText] = 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 const [showTags, setShowTags] = useState<string[]>([])\n const [showImage, setShowImage] = useState<boolean>(false)\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 || data?.name\n const displayDescription = data?.custom_description || data?.description\n\n useEffect(() => {\n let handleTags: string[] = []\n if (discount) {\n const discountTag = `${discount}${configuration?.metafields?.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 }, [discount, configuration?.metafields?.discounts, data?.tags])\n\n useEffect(() => {\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n const { shopCommon } = configuration?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n }, [data, variant])\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:aspect-h-[560] lg-desktop:aspect-w-[544] desktop:aspect-h-[448] desktop:aspect-w-[427] tablet:aspect-h-[400] tablet:aspect-w-[296]',\n 'relative bg-[#EAEAEC] tablet:hover:bg-[#FFFFFF] box-border w-full cursor-pointer overflow-hidden duration-300',\n 'md-tablet:h-[400px] collection-shelves-item',\n {\n 'aiui-dark': data?.custom_theme === 'dark',\n }\n )}\n >\n <div className=\"absolute inset-0 box-border flex flex-col justify-between overflow-hidden\">\n <div\n onMouseEnter={() => setShowImage(true)}\n onMouseLeave={() => setShowImage(false)}\n className={cn(\n 'desktop:p-6 relative inline-block w-full lg-desktop:h-[280px] desktop:h-[234px] h-[182px] overflow-hidden cursor-pointer'\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\n alt=\"\"\n source={handleUrl()}\n className=\"desktop:mt-6 mt-4 flex h-full justify-center object-cover [&_img]:h-full [&_img]:w-auto\"\n />\n <Picture\n alt=\"\"\n source={data?.custom_image}\n className={cn(\n showImage ? 'opacity-100' : 'opacity-0',\n 'absolute inset-x-0 top-0 h-full object-cover [&_img]:size-full transition-all duration-300'\n )}\n />\n </a>\n </div>\n <div className=\"overflow-hidden flex flex-col justify-end desktop:p-6 p-4 flex-1 collection-shelves-product-content\">\n {isShowTag && showTags?.length ? (\n <div className=\"mb-1 box-border flex flex-wrap gap-1 overflow-hidden\">\n {showTags?.map?.((item: any, index: number) => <Badge key={index}>{item}</Badge>)}\n </div>\n ) : null}\n {displayTitle ? (\n <Heading\n as=\"h3\"\n title={displayTitle || ''}\n html={displayTitle || ''}\n className=\"lg-desktop:text-2xl text-xl collection-shelves-product-title mb-1 line-clamp-2 text-info-primary font-semibold\"\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"lg-desktop:text-lg lg-desktop:h-[26px] desktop:text-base desktop:h-6 collection-shelves-product-description line-clamp-1 h-5 text-sm font-semibold text-info-primary\"\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-semibold\">{soldOutText || ''}</div>\n ) : (\n <>\n <div className=\"final-price tablet:text-2xl text-info-primary text-xl font-semibold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price tablet:text-xl text-info-secondary ml-1 text-lg font-semibold 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={`overflow-hidden font-semibold ${configuration.direction === 'vertical' ? 'w-full' : ''} ${configuration?.shape === 'rounded' ? 'rounded-2xl' : ''}`}\n >\n {configuration?.secondaryButton || ''}\n </Button>\n ) : null}\n {configuration?.primaryButton ? (\n <Button\n variant=\"primary\"\n disabled={isSoldOut}\n onClick={() => onPrimaryButton(data, configuration?.index, configuration)}\n className={`overflow-hidden font-semibold ${configuration.direction === 'vertical' ? 'w-full' : ''} ${configuration?.shape === 'rounded' ? 'rounded-2xl' : ''}`}\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
6
|
"names": ["Fragment", "jsx", "jsxs", "cn", "Badge", "Text", "Button", "gaTrack", "useState", "useEffect", "Picture", "Heading", "useAiuiContext", "trackUrlRef", "formatVariantPrice", "componentType", "componentName", "SOLD_OUT_PRICE", "CollectionShelvesWrapItem", "data", "configuration", "itemShape", "locale", "soldOutText", "setSoldOutText", "onPrimaryButton", "params", "index", "onSecondaryButton", "variant", "item", "isSoldOut", "isShowTag", "isShowOriginalPrice", "showTags", "setShowTags", "showImage", "setShowImage", "coupon", "price", "basePrice", "discount", "handleUrl", "sku", "skuArray", "displayTitle", "displayDescription", "handleTags", "discountTag", "newTags", "infos", "productInfos", "preRender", "shopCommon"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Fragment as ye,jsx as s,jsxs as a}from"react/jsx-runtime";import{cn as b}from"../../helpers/utils.js";import{useAiuiContext as
|
|
1
|
+
import{Fragment as ye,jsx as s,jsxs as a}from"react/jsx-runtime";import{cn as b}from"../../helpers/utils.js";import{useAiuiContext as ue}from"../AiuiProvider/index.js";import{formatVariantPrice as pe}from"../ShelfDisplay/shelfDisplay.js";import fe from"../../components/badge.js";import"../../components/heading.js";import{Text as ge}from"../../components/text.js";import D from"../../components/button.js";import H from"../../components/picture.js";import{trackUrlRef as y}from"../../shared/trackUrlRef.js";import{getFunctionMemberPrice as be}from"./component/price.js";import{useState as i,useEffect as k}from"react";const C="image",_="product_shelf",xe=999999999e-2,ve=e=>{let c;return e?.includes("products")?c=e?.split("products")[0]+"files/":c=e?.replace(e?.split("files")?.pop()||"","")+"/",c},he=({data:e,isSale:c=!1,buttonText:N,itemShape:W,metafields:A,onPrimaryChange:U,onSecondaryChange:E})=>{const{memberPriceDiscount:R,memberSetting:S,discounts:w,shopCommon:V}=A,[m,P]=i(""),[q,T]=i(""),[p,$]=i(""),[I,G]=i(!1),[B,J]=i({}),[K,Q]=i(!1),[x,X]=i({price:"",basePrice:""}),[M,Y]=i([]),[Z,ee]=i([]),[f,te]=i(""),[se,oe]=i(""),{locale:l="us",currencyCode:re,isLogin:L}=ue(),v=e?.custom_name||e?.title||e?.name,z=e?.custom_description||e?.description||e?.descriptionHtml,n=e?.filter_variants||e?.variants||[],ie=t=>$(t),h=(t,r,o,d)=>{Q(d),te(t||""),X({basePrice:r||"",price:o||""})};return k(()=>{if(p){const o=n?.find(d=>d?.name?.includes?.(p));P(o?.sku||n?.[0]?.sku||""),T(o?.image?.url||n?.[0]?.image?.url||"");return}const t=e?.options?.find(o=>o?.displayName==="color")?.values?.[0]?.label;t&&$(t);const r=n?.find(o=>o?.name?.includes?.(t));P(r?.sku||n?.[0]?.sku||""),T(r?.image?.url||n?.[0]?.image?.url||"")},[p]),k(()=>{if(!m)return;Y(e?.tags||[]);const t=n?.find(u=>u?.sku===m)||n?.[0]||{};J(t),G(!t?.availableForSale||t?.price?.amount===xe);const{infos:r}=t?.metafields||{},{productInfos:o,preRender:d}=e?.metafields||{};oe(r?.comingSoon||o?.comingSoon||d?.soldOut||V?.soldOut||"");const g=t?.coupons?.[0],{price:F,basePrice:O,discount:le,discountAmount:ne}=pe({locale:l,amount:g?g.variant_price4wscode:t.price,baseAmount:g?t.price:0,currencyCode:e?.price?.currencyCode||"USD"}),j=(g?.value_type==="fixed_amount"?ne:le)||"";if(L){const u=be({locale:l,variant:t,shopMemberPriceDiscountConfig:R,currencyCode:re||e?.price?.currencyCode||"USD"});if(u){const{hasMemberPrice:ae,salePriceWithCurrency:ce,originalPriceWithCurrency:me,savePriceWithCurrency:de}=u;h(de||"",me||"",ae?ce:"",u?.hasMemberPrice)}else h(j,O||"",F||"",!1)}else h(j,O||"",F||"",!1)},[e,m]),k(()=>{let t=[];if(f){const o=`${f}${w?.off}`;t.push(o)}const r=M?.filter?.(o=>o?.startsWith?.("CLtag"))?.map?.(o=>o?.replace?.("CLtag:",""))?.slice?.(0,f?1:2);ee(t.concat(r))},[M,f]),c&&!x?.basePrice&&!e?.mImage?null:s("div",{className:b(W==="round"?"rounded-2xl":"rounded-none","lg-desktop:h-[493px] laptop:h-[433px] h-[398px] relative tablet:hover:bg-info-white","bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300",{"aiui-dark":e.theme==="dark"}),children:e?.mImage?s("div",{className:"absolute inset-0 box-border overflow-hidden hover:[&_img]:scale-105",children:s("div",{className:"relative inset-0 size-full",children:a("a",{className:"size-full",href:y(e?.link,`${C}_${_}`),children:[s(H,{alt:"",source:e?.mImage?.url||e?.mImage,className:"size-full [&_img]:object-cover [&_img]:size-full",imgClassName:"size-full object-cover transition-all duration-300"}),a("div",{className:"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4",children:[s("p",{className:"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-semibold",dangerouslySetInnerHTML:{__html:e?.subTitle}}),s("span",{className:"text-info-secondary desktop:text-[32px] text-[20px] font-semibold desktop:leading-9 line-clamp-4",dangerouslySetInnerHTML:{__html:e?.title}})]})]})})}):a("div",{className:"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden tablet:p-4 p-2 pb-4",children:[s("div",{className:"flex flex-wrap gap-1 overflow-hidden collection-filter-tags",children:Z?.map?.((t,r)=>s(fe,{className:"whitespace-nowrap max-w-full truncate px-1 box-border font-semibold item-badge",children:t},r))}),s("a",{target:"_blank","aria-label":v,href:y(`${l==="us"||!l?"":`/${l}`}/products/${e?.handle}`,`${C}_${_}`),children:s("div",{className:b("my-1 m-auto desktop:size-[196px] size-[120px] overflow-hidden"),children:s(H,{alt:"",source:q,className:"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit"})})}),e?.options?.map(t=>{if(t?.displayName==="color")return s("div",{className:"flex items-center gap-1",children:t?.values?.map(r=>{const o=r?.hexColors?r.hexColors?.[0]:r?.label;return s("button",{onClick:()=>ie(r?.label),className:b("size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent",`${p===r?.label?"border-[#00BEFA]":""}`),children:s("img",{alt:o,className:"h-full w-full object-cover",src:`${ve(e?.images?.[0]?.url)}${o?.toLowerCase().split(" ")?.join("-")}_50x.png`})},r?.label)})})}),a("div",{children:[v?s("span",{dangerouslySetInnerHTML:{__html:v||""},className:"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:test-xl test-base font-semibold"}):null,e?.metafields?.judgemeBadge?s("a",{target:"_blank",className:"font-semibold text-xs [&_.jdgm-star]:text-[#F77234]",dangerouslySetInnerHTML:{__html:e?.metafields?.judgemeBadge},href:y(`${l==="us"||!l?"":`/${l}`}/products/${e?.handle}`,`${C}_${_}`)}):null,z?s(ge,{size:2,html:z||"",className:"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-semibold"}):null,a("div",{className:"mt-3 mb-2",children:[s("p",{dangerouslySetInnerHTML:{__html:L&&K&&(w?.memberPrice||S?.member_price||S?.plus_member_price)||""},className:"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-semibold"}),s("div",{className:"flex items-center",children:I?s("div",{className:"desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold",children:se||""}):a(ye,{children:[s("div",{className:"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold",children:B?.availableForSale&&x?.price||""}),s("div",{className:"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-semibold line-through",children:B?.availableForSale&&x?.basePrice||""})]})})]}),a("div",{className:b("shelf-flex-button-group","lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col"),children:[s(D,{variant:"secondary",className:"m-tablet:w-full",onClick:()=>E?.(e,m),children:N?.secondaryButton||"Learn More"}),s(D,{variant:"primary",className:"m-tablet:w-full",disabled:I,onClick:()=>U?.(e,m),children:N?.primaryButton||"Shop Now"})]})]})]})},e?.id||e?.handle)};var Le=he;export{Le as default};
|
|
2
2
|
//# sourceMappingURL=FilterCardWrapItem.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/CollectionsFilters/FilterCardWrapItem.tsx"],
|
|
4
|
-
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getFunctionMemberPrice } from './component/price.js'\nimport { useState, useEffect } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst getShopifyCdnBaseUrl = (imagePath: string | null) => {\n // \u76EE\u524D\u77E5\u9053\u7684 shopify \u56FE\u7247\u8DEF\u7531\u7684\u5F62\u5F0F\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/files/Group_5581_2.jpg?v=1662379184\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/products/B2633123.jpg?v=1631264041_3840x\n // \u8FD4\u56DE https://cdn.shopify.com/s/files/1/0493/9834/9974/files/\n let path\n if (imagePath?.includes('products')) {\n path = imagePath?.split('products')[0] + 'files/'\n } else {\n path = imagePath?.replace(imagePath?.split('files')?.pop() || '', '') + '/'\n }\n return path\n}\n\ntype FilterCardWrapItemProps = {\n data: any\n isSale?: boolean\n buttonText?: any\n itemShape?: string\n metafields: any\n onPrimaryChange?: (item: any, sku: string) => void\n onSecondaryChange?: (item: any, sku: string) => void\n}\n\nconst FilterCardWrapItem = ({\n data,\n isSale = false,\n buttonText,\n itemShape,\n metafields,\n onPrimaryChange,\n onSecondaryChange,\n}: FilterCardWrapItemProps) => {\n const { memberPriceDiscount, memberSetting, discounts, shopCommon } = metafields\n const [currentSku, setCurrentSku] = useState<string>('')\n const [currentImage, setCurrentImage] = useState<string>('')\n const [selectedColor, setSelectedColor] = useState<string>('')\n const [isSoldOut, setIsSoldOut] = useState<any>(false)\n const [currentVariant, setCurrentVariant] = useState<any>({})\n const [plusMemberStatus, setPlusMemberStatus] = useState<boolean>(false)\n const [priceCollection, setPriceCollection] = useState<{ price: string; basePrice: string }>({\n price: '',\n basePrice: '',\n })\n const [tags, setTags] = useState<string[]>([])\n const [showTags, setShowTags] = useState<string[]>([])\n const [discountCollection, setDiscountCollection] = useState<string>('')\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const { locale = 'us', currencyCode, isLogin } = useAiuiContext()\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description || data?.descriptionHtml\n const skuArray = data?.filter_variants || data?.variants || []\n\n const onColorClick = (color: string) => setSelectedColor(color)\n\n const handleBasePrice = (discount: string, priceCurrency: string, salePrice: string, status: boolean) => {\n setPlusMemberStatus(status)\n setDiscountCollection(discount || '')\n setPriceCollection({\n basePrice: priceCurrency || '',\n price: salePrice || '',\n })\n }\n\n useEffect(() => {\n if (selectedColor) {\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(selectedColor))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n return\n }\n const firstOption = data?.options?.find((item: any) => item?.displayName === 'color')?.values?.[0]?.label\n firstOption && setSelectedColor(firstOption)\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(firstOption))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n }, [selectedColor])\n\n useEffect(() => {\n if (!currentSku) return\n setTags(data?.tags || [])\n const variant = skuArray?.find((item: any) => item?.sku === currentSku) || skuArray?.[0] || {}\n setCurrentVariant(variant)\n setIsSoldOut(!variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE)\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n const { price, basePrice, discount, discountAmount } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n const showPrice = (coupon?.value_type === 'fixed_amount' ? discountAmount : discount) || ''\n // \u4F1A\u5458\u6298\u6263\n if (isLogin) {\n const result = getFunctionMemberPrice({\n locale: locale,\n variant: variant,\n shopMemberPriceDiscountConfig: memberPriceDiscount,\n currencyCode: currencyCode || data?.price?.currencyCode || 'USD',\n })\n if (result) {\n const { hasMemberPrice, salePriceWithCurrency, originalPriceWithCurrency, savePriceWithCurrency } = result\n handleBasePrice(\n savePriceWithCurrency || '',\n originalPriceWithCurrency || '',\n hasMemberPrice ? salePriceWithCurrency : '',\n result?.hasMemberPrice\n )\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n }, [data, currentSku])\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discountCollection) {\n const discountTag = `${discountCollection}${discounts?.off}`\n handleTags.push(discountTag)\n }\n const newTags = tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discountCollection ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [tags, discountCollection])\n\n if (isSale && !priceCollection?.basePrice && !data?.mImage) {\n return null\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:h-[493px] laptop:h-[433px] h-[398px] relative tablet:hover:bg-info-white',\n 'bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n {data?.mImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden hover:[&_img]:scale-105\">\n <div className=\"relative inset-0 size-full\">\n <a className=\"size-full\" href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}>\n <Picture\n alt=\"\"\n source={data?.mImage?.url || data?.mImage}\n className=\"size-full [&_img]:object-cover [&_img]:size-full\"\n imgClassName=\"size-full object-cover transition-all duration-300\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4\">\n <p\n className=\"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-semibold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n />\n <span\n className=\"text-info-secondary desktop:text-[32px] text-[20px] font-semibold desktop:leading-9 line-clamp-4\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n />\n </div>\n </a>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden tablet:p-4 p-2 pb-4\">\n <div className=\"flex flex-wrap gap-1 overflow-hidden collection-filter-tags\">\n {showTags?.map?.((item: string, index: number) => (\n <Badge\n key={index}\n className=\"whitespace-nowrap max-w-full truncate px-1 box-border font-semibold item-badge\"\n >\n {item}\n </Badge>\n ))}\n </div>\n <a\n target=\"_blank\"\n aria-label={displayTitle}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <div className={cn('my-1 m-auto desktop:size-[196px] size-[120px] overflow-hidden')}>\n <Picture\n alt=\"\"\n source={currentImage}\n className=\"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit\"\n />\n </div>\n </a>\n {data?.options?.map((option: any) => {\n if (option?.displayName === 'color') {\n return (\n <div className=\"flex items-center gap-1\">\n {option?.values?.map((item: any) => {\n const color = item?.hexColors ? item.hexColors?.[0] : item?.label\n return (\n <button\n key={item?.label}\n onClick={() => onColorClick(item?.label)}\n className={cn(\n 'size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent',\n `${selectedColor === item?.label ? 'border-[#00BEFA]' : ''}`\n )}\n >\n <img\n alt={color}\n className=\"h-full w-full object-cover\"\n src={`${getShopifyCdnBaseUrl(data?.images?.[0]?.url)}${color\n ?.toLowerCase()\n .split(' ')\n ?.join('-')}_${'50x'}.png`}\n />\n </button>\n )\n })}\n </div>\n )\n }\n })}\n <div>\n {displayTitle ? (\n <Text\n size={2}\n html={displayTitle || ''}\n className=\"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:test-xl test-base font-semibold\"\n />\n ) : null}\n {data?.metafields?.judgemeBadge ? (\n <a\n target=\"_blank\"\n className=\"font-semibold text-xs [&_.jdgm-star]:text-[#F77234]\"\n dangerouslySetInnerHTML={{ __html: data?.metafields?.judgemeBadge }}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-semibold\"\n />\n ) : null}\n <div className=\"mt-3 mb-2\">\n <p\n dangerouslySetInnerHTML={{\n __html:\n isLogin && plusMemberStatus\n ? discounts?.memberPrice || memberSetting?.member_price || memberSetting?.plus_member_price || ''\n : '',\n }}\n className=\"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-semibold\"\n />\n <div className=\"flex items-center\">\n {isSoldOut ? (\n <div className=\"desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {soldOutText || ''}\n </div>\n ) : (\n <>\n <div className=\"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {currentVariant?.availableForSale ? priceCollection?.price || '' : ''}\n </div>\n <div className=\"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-semibold line-through\">\n {currentVariant?.availableForSale ? priceCollection?.basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col')}\n >\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full\"\n onClick={() => onSecondaryChange?.(data, currentSku)}\n >\n {buttonText?.secondaryButton || 'Learn More'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full\"\n disabled={isSoldOut}\n onClick={() => onPrimaryChange?.(data, currentSku)}\n >\n {buttonText?.primaryButton || 'Shop Now'}\n </Button>\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\nexport default FilterCardWrapItem\n"],
|
|
5
|
-
"mappings": "AA6Kc,
|
|
4
|
+
"sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay.js'\nimport Badge from '../../components/badge.js'\nimport { Heading } from '../../components/heading.js'\nimport { Text } from '../../components/text.js'\nimport Button from '../../components/button.js'\nimport Picture from '../../components/picture.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport { getFunctionMemberPrice } from './component/price.js'\nimport { useState, useEffect } from 'react'\n\nconst componentType = 'image'\nconst componentName = 'product_shelf'\n\nconst SOLD_OUT_PRICE = 9999999.99\n\nconst getShopifyCdnBaseUrl = (imagePath: string | null) => {\n // \u76EE\u524D\u77E5\u9053\u7684 shopify \u56FE\u7247\u8DEF\u7531\u7684\u5F62\u5F0F\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/files/Group_5581_2.jpg?v=1662379184\n // https://cdn.shopify.com/s/files/1/0493/9834/9974/products/B2633123.jpg?v=1631264041_3840x\n // \u8FD4\u56DE https://cdn.shopify.com/s/files/1/0493/9834/9974/files/\n let path\n if (imagePath?.includes('products')) {\n path = imagePath?.split('products')[0] + 'files/'\n } else {\n path = imagePath?.replace(imagePath?.split('files')?.pop() || '', '') + '/'\n }\n return path\n}\n\ntype FilterCardWrapItemProps = {\n data: any\n isSale?: boolean\n buttonText?: any\n itemShape?: string\n metafields: any\n onPrimaryChange?: (item: any, sku: string) => void\n onSecondaryChange?: (item: any, sku: string) => void\n}\n\nconst FilterCardWrapItem = ({\n data,\n isSale = false,\n buttonText,\n itemShape,\n metafields,\n onPrimaryChange,\n onSecondaryChange,\n}: FilterCardWrapItemProps) => {\n const { memberPriceDiscount, memberSetting, discounts, shopCommon } = metafields\n const [currentSku, setCurrentSku] = useState<string>('')\n const [currentImage, setCurrentImage] = useState<string>('')\n const [selectedColor, setSelectedColor] = useState<string>('')\n const [isSoldOut, setIsSoldOut] = useState<any>(false)\n const [currentVariant, setCurrentVariant] = useState<any>({})\n const [plusMemberStatus, setPlusMemberStatus] = useState<boolean>(false)\n const [priceCollection, setPriceCollection] = useState<{ price: string; basePrice: string }>({\n price: '',\n basePrice: '',\n })\n const [tags, setTags] = useState<string[]>([])\n const [showTags, setShowTags] = useState<string[]>([])\n const [discountCollection, setDiscountCollection] = useState<string>('')\n const [soldOutText, setSoldOutText] = useState<string>('')\n\n const { locale = 'us', currencyCode, isLogin } = useAiuiContext()\n\n const displayTitle = data?.custom_name || data?.title || data?.name\n const displayDescription = data?.custom_description || data?.description || data?.descriptionHtml\n const skuArray = data?.filter_variants || data?.variants || []\n\n const onColorClick = (color: string) => setSelectedColor(color)\n\n const handleBasePrice = (discount: string, priceCurrency: string, salePrice: string, status: boolean) => {\n setPlusMemberStatus(status)\n setDiscountCollection(discount || '')\n setPriceCollection({\n basePrice: priceCurrency || '',\n price: salePrice || '',\n })\n }\n\n useEffect(() => {\n if (selectedColor) {\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(selectedColor))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n return\n }\n const firstOption = data?.options?.find((item: any) => item?.displayName === 'color')?.values?.[0]?.label\n firstOption && setSelectedColor(firstOption)\n const findSku = skuArray?.find((item: any) => item?.name?.includes?.(firstOption))\n setCurrentSku(findSku?.sku || skuArray?.[0]?.sku || '')\n setCurrentImage(findSku?.image?.url || skuArray?.[0]?.image?.url || '')\n }, [selectedColor])\n\n useEffect(() => {\n if (!currentSku) return\n setTags(data?.tags || [])\n const variant = skuArray?.find((item: any) => item?.sku === currentSku) || skuArray?.[0] || {}\n setCurrentVariant(variant)\n setIsSoldOut(!variant?.availableForSale || variant?.price?.amount === SOLD_OUT_PRICE)\n const { infos } = variant?.metafields || {}\n const { productInfos, preRender } = data?.metafields || {}\n setSoldOutText(infos?.comingSoon || productInfos?.comingSoon || preRender?.soldOut || shopCommon?.soldOut || '')\n // active \u7684 \u901A\u7528\u6298\u6263\n const coupon = variant?.coupons?.[0]\n const { price, basePrice, discount, discountAmount } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant.price,\n baseAmount: coupon ? variant.price : 0,\n currencyCode: data?.price?.currencyCode || 'USD',\n })\n const showPrice = (coupon?.value_type === 'fixed_amount' ? discountAmount : discount) || ''\n // \u4F1A\u5458\u6298\u6263\n if (isLogin) {\n const result = getFunctionMemberPrice({\n locale: locale,\n variant: variant,\n shopMemberPriceDiscountConfig: memberPriceDiscount,\n currencyCode: currencyCode || data?.price?.currencyCode || 'USD',\n })\n if (result) {\n const { hasMemberPrice, salePriceWithCurrency, originalPriceWithCurrency, savePriceWithCurrency } = result\n handleBasePrice(\n savePriceWithCurrency || '',\n originalPriceWithCurrency || '',\n hasMemberPrice ? salePriceWithCurrency : '',\n result?.hasMemberPrice\n )\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n } else {\n handleBasePrice(showPrice, basePrice || '', price || '', false)\n }\n }, [data, currentSku])\n\n // \u5904\u7406\u6807\u7B7E\n useEffect(() => {\n let handleTags: string[] = []\n if (discountCollection) {\n const discountTag = `${discountCollection}${discounts?.off}`\n handleTags.push(discountTag)\n }\n const newTags = tags\n ?.filter?.((item: string) => item?.startsWith?.('CLtag'))\n ?.map?.((item: string) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, discountCollection ? 1 : 2)\n setShowTags(handleTags.concat(newTags))\n }, [tags, discountCollection])\n\n if (isSale && !priceCollection?.basePrice && !data?.mImage) {\n return null\n }\n\n return (\n <div\n key={data?.id || data?.handle}\n className={cn(\n itemShape === 'round' ? 'rounded-2xl' : 'rounded-none',\n 'lg-desktop:h-[493px] laptop:h-[433px] h-[398px] relative tablet:hover:bg-info-white',\n 'bg-container-secondary-1 box-border w-full cursor-pointer overflow-hidden duration-300',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n {data?.mImage ? (\n <div className=\"absolute inset-0 box-border overflow-hidden hover:[&_img]:scale-105\">\n <div className=\"relative inset-0 size-full\">\n <a className=\"size-full\" href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}>\n <Picture\n alt=\"\"\n source={data?.mImage?.url || data?.mImage}\n className=\"size-full [&_img]:object-cover [&_img]:size-full\"\n imgClassName=\"size-full object-cover transition-all duration-300\"\n />\n <div className=\"desktop:p-6 absolute inset-x-0 top-0 box-border overflow-hidden p-4\">\n <p\n className=\"desktop:mb-2 mb-1 text-info-primary desktop:text-base text-sm font-semibold\"\n dangerouslySetInnerHTML={{ __html: data?.subTitle }}\n />\n <span\n className=\"text-info-secondary desktop:text-[32px] text-[20px] font-semibold desktop:leading-9 line-clamp-4\"\n dangerouslySetInnerHTML={{ __html: data?.title }}\n />\n </div>\n </a>\n </div>\n </div>\n ) : (\n <div className=\"desktop:p-6 absolute inset-0 box-border flex flex-col justify-between overflow-hidden tablet:p-4 p-2 pb-4\">\n <div className=\"flex flex-wrap gap-1 overflow-hidden collection-filter-tags\">\n {showTags?.map?.((item: string, index: number) => (\n <Badge\n key={index}\n className=\"whitespace-nowrap max-w-full truncate px-1 box-border font-semibold item-badge\"\n >\n {item}\n </Badge>\n ))}\n </div>\n <a\n target=\"_blank\"\n aria-label={displayTitle}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n >\n <div className={cn('my-1 m-auto desktop:size-[196px] size-[120px] overflow-hidden')}>\n <Picture\n alt=\"\"\n source={currentImage}\n className=\"h-full [&_img]:object-cover [&_img]:h-full [&_img]:w-fit\"\n />\n </div>\n </a>\n {data?.options?.map((option: any) => {\n if (option?.displayName === 'color') {\n return (\n <div className=\"flex items-center gap-1\">\n {option?.values?.map((item: any) => {\n const color = item?.hexColors ? item.hexColors?.[0] : item?.label\n return (\n <button\n key={item?.label}\n onClick={() => onColorClick(item?.label)}\n className={cn(\n 'size-4 rounded-full cursor-pointer overflow-hidden border-2 border-transparent',\n `${selectedColor === item?.label ? 'border-[#00BEFA]' : ''}`\n )}\n >\n <img\n alt={color}\n className=\"h-full w-full object-cover\"\n src={`${getShopifyCdnBaseUrl(data?.images?.[0]?.url)}${color\n ?.toLowerCase()\n .split(' ')\n ?.join('-')}_${'50x'}.png`}\n />\n </button>\n )\n })}\n </div>\n )\n }\n })}\n <div>\n {displayTitle ? (\n <span\n dangerouslySetInnerHTML={{ __html: displayTitle || '' }}\n className=\"shelf-display-product-title line-clamp-2 lg-desktop:text-2xl laptop:test-xl test-base font-semibold\"\n />\n ) : null}\n {data?.metafields?.judgemeBadge ? (\n <a\n target=\"_blank\"\n className=\"font-semibold text-xs [&_.jdgm-star]:text-[#F77234]\"\n dangerouslySetInnerHTML={{ __html: data?.metafields?.judgemeBadge }}\n href={trackUrlRef(\n `${locale === 'us' || !locale ? '' : `/${locale}`}/products/${data?.handle}`,\n `${componentType}_${componentName}`\n )}\n />\n ) : null}\n {displayDescription ? (\n <Text\n size={2}\n html={displayDescription || ''}\n className=\"desktop:text-base laptop:text-sm shelf-display-product-description line-clamp-1 text-xs font-semibold\"\n />\n ) : null}\n <div className=\"mt-3 mb-2\">\n <p\n dangerouslySetInnerHTML={{\n __html:\n isLogin && plusMemberStatus\n ? discounts?.memberPrice || memberSetting?.member_price || memberSetting?.plus_member_price || ''\n : '',\n }}\n className=\"text-info-primary lg-desktop:text-lg desktop:text-base laptop:text-sm text-xs font-semibold\"\n />\n <div className=\"flex items-center\">\n {isSoldOut ? (\n <div className=\"desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {soldOutText || ''}\n </div>\n ) : (\n <>\n <div className=\"final-price desktop:text-2xl tablet:text-xl text-info-primary text-base font-semibold\">\n {currentVariant?.availableForSale ? priceCollection?.price || '' : ''}\n </div>\n <div className=\"origin-price desktop:text-xl tablet:text-lg text-info-secondary ml-1 text-sm font-semibold line-through\">\n {currentVariant?.availableForSale ? priceCollection?.basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n </div>\n {/* \u6309\u94AE\u7EC4 */}\n <div\n className={cn('shelf-flex-button-group', 'lg-desktop:gap-3 flex items-center gap-2 m-tablet:flex-col')}\n >\n <Button\n variant=\"secondary\"\n className=\"m-tablet:w-full\"\n onClick={() => onSecondaryChange?.(data, currentSku)}\n >\n {buttonText?.secondaryButton || 'Learn More'}\n </Button>\n <Button\n variant=\"primary\"\n className=\"m-tablet:w-full\"\n disabled={isSoldOut}\n onClick={() => onPrimaryChange?.(data, currentSku)}\n >\n {buttonText?.primaryButton || 'Shop Now'}\n </Button>\n </div>\n </div>\n </div>\n )}\n </div>\n )\n}\nexport default FilterCardWrapItem\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "cn", "useAiuiContext", "formatVariantPrice", "Badge", "Text", "Button", "Picture", "trackUrlRef", "getFunctionMemberPrice", "useState", "useEffect", "componentType", "componentName", "SOLD_OUT_PRICE", "getShopifyCdnBaseUrl", "imagePath", "path", "FilterCardWrapItem", "data", "isSale", "buttonText", "itemShape", "metafields", "onPrimaryChange", "onSecondaryChange", "memberPriceDiscount", "memberSetting", "discounts", "shopCommon", "currentSku", "setCurrentSku", "currentImage", "setCurrentImage", "selectedColor", "setSelectedColor", "isSoldOut", "setIsSoldOut", "currentVariant", "setCurrentVariant", "plusMemberStatus", "setPlusMemberStatus", "priceCollection", "setPriceCollection", "tags", "setTags", "showTags", "setShowTags", "discountCollection", "setDiscountCollection", "soldOutText", "setSoldOutText", "locale", "currencyCode", "isLogin", "displayTitle", "displayDescription", "skuArray", "onColorClick", "color", "handleBasePrice", "discount", "priceCurrency", "salePrice", "status", "findSku", "item", "firstOption", "variant", "infos", "productInfos", "preRender", "coupon", "price", "basePrice", "discountAmount", "showPrice", "result", "hasMemberPrice", "salePriceWithCurrency", "originalPriceWithCurrency", "savePriceWithCurrency", "handleTags", "discountTag", "newTags", "index", "option", "FilterCardWrapItem_default"]
|
|
7
7
|
}
|
|
@@ -1,373 +0,0 @@
|
|
|
1
|
-
import type { StoryObj } from '@storybook/react';
|
|
2
|
-
import { Tabs } from '../components/index.js';
|
|
3
|
-
import React, { type ComponentType } from 'react';
|
|
4
|
-
declare const meta: {
|
|
5
|
-
title: string;
|
|
6
|
-
component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
7
|
-
align?: import("../types/props.js").Align;
|
|
8
|
-
shape?: import("../types/props.js").Shape;
|
|
9
|
-
} & React.RefAttributes<HTMLDivElement>>;
|
|
10
|
-
subcomponents: {
|
|
11
|
-
TabsList: ComponentType<unknown>;
|
|
12
|
-
TabsTrigger: ComponentType<unknown>;
|
|
13
|
-
TabsContent: ComponentType<unknown>;
|
|
14
|
-
};
|
|
15
|
-
decorators: ((Story: import("@storybook/core/csf").PartialStoryFn<import("@storybook/react").ReactRenderer, {
|
|
16
|
-
content?: string | undefined | undefined;
|
|
17
|
-
translate?: "yes" | "no" | undefined | undefined;
|
|
18
|
-
prefix?: string | undefined | undefined;
|
|
19
|
-
className?: string | undefined | undefined;
|
|
20
|
-
asChild?: boolean | undefined;
|
|
21
|
-
value?: string | undefined;
|
|
22
|
-
defaultChecked?: boolean | undefined | undefined;
|
|
23
|
-
defaultValue?: string | undefined;
|
|
24
|
-
suppressContentEditableWarning?: boolean | undefined | undefined;
|
|
25
|
-
suppressHydrationWarning?: boolean | undefined | undefined;
|
|
26
|
-
accessKey?: string | undefined | undefined;
|
|
27
|
-
autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
|
|
28
|
-
autoFocus?: boolean | undefined | undefined;
|
|
29
|
-
contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
|
|
30
|
-
contextMenu?: string | undefined | undefined;
|
|
31
|
-
dir?: ("ltr" | "rtl") | undefined;
|
|
32
|
-
draggable?: (boolean | "true" | "false") | undefined;
|
|
33
|
-
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
|
|
34
|
-
hidden?: boolean | undefined | undefined;
|
|
35
|
-
id?: string | undefined | undefined;
|
|
36
|
-
lang?: string | undefined | undefined;
|
|
37
|
-
nonce?: string | undefined | undefined;
|
|
38
|
-
slot?: string | undefined | undefined;
|
|
39
|
-
spellCheck?: (boolean | "true" | "false") | undefined;
|
|
40
|
-
style?: React.CSSProperties | undefined;
|
|
41
|
-
tabIndex?: number | undefined | undefined;
|
|
42
|
-
title?: string | undefined | undefined;
|
|
43
|
-
radioGroup?: string | undefined | undefined;
|
|
44
|
-
role?: React.AriaRole | undefined;
|
|
45
|
-
about?: string | undefined | undefined;
|
|
46
|
-
datatype?: string | undefined | undefined;
|
|
47
|
-
inlist?: any;
|
|
48
|
-
property?: string | undefined | undefined;
|
|
49
|
-
rel?: string | undefined | undefined;
|
|
50
|
-
resource?: string | undefined | undefined;
|
|
51
|
-
rev?: string | undefined | undefined;
|
|
52
|
-
typeof?: string | undefined | undefined;
|
|
53
|
-
vocab?: string | undefined | undefined;
|
|
54
|
-
autoCorrect?: string | undefined | undefined;
|
|
55
|
-
autoSave?: string | undefined | undefined;
|
|
56
|
-
color?: string | undefined | undefined;
|
|
57
|
-
itemProp?: string | undefined | undefined;
|
|
58
|
-
itemScope?: boolean | undefined | undefined;
|
|
59
|
-
itemType?: string | undefined | undefined;
|
|
60
|
-
itemID?: string | undefined | undefined;
|
|
61
|
-
itemRef?: string | undefined | undefined;
|
|
62
|
-
results?: number | undefined | undefined;
|
|
63
|
-
security?: string | undefined | undefined;
|
|
64
|
-
unselectable?: "on" | "off" | undefined | undefined;
|
|
65
|
-
inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
|
|
66
|
-
is?: string | undefined | undefined;
|
|
67
|
-
exportparts?: string | undefined | undefined;
|
|
68
|
-
part?: string | undefined | undefined;
|
|
69
|
-
popover?: "" | "auto" | "manual" | undefined | undefined;
|
|
70
|
-
popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
|
|
71
|
-
popoverTarget?: string | undefined | undefined;
|
|
72
|
-
onToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
|
|
73
|
-
onBeforeToggle?: React.ToggleEventHandler<HTMLDivElement> | undefined;
|
|
74
|
-
inert?: boolean | undefined | undefined;
|
|
75
|
-
tw?: string | undefined;
|
|
76
|
-
"aria-activedescendant"?: string | undefined | undefined;
|
|
77
|
-
"aria-atomic"?: (boolean | "true" | "false") | undefined;
|
|
78
|
-
"aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
|
|
79
|
-
"aria-braillelabel"?: string | undefined | undefined;
|
|
80
|
-
"aria-brailleroledescription"?: string | undefined | undefined;
|
|
81
|
-
"aria-busy"?: (boolean | "true" | "false") | undefined;
|
|
82
|
-
"aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
83
|
-
"aria-colcount"?: number | undefined | undefined;
|
|
84
|
-
"aria-colindex"?: number | undefined | undefined;
|
|
85
|
-
"aria-colindextext"?: string | undefined | undefined;
|
|
86
|
-
"aria-colspan"?: number | undefined | undefined;
|
|
87
|
-
"aria-controls"?: string | undefined | undefined;
|
|
88
|
-
"aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
|
|
89
|
-
"aria-describedby"?: string | undefined | undefined;
|
|
90
|
-
"aria-description"?: string | undefined | undefined;
|
|
91
|
-
"aria-details"?: string | undefined | undefined;
|
|
92
|
-
"aria-disabled"?: (boolean | "true" | "false") | undefined;
|
|
93
|
-
"aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
|
|
94
|
-
"aria-errormessage"?: string | undefined | undefined;
|
|
95
|
-
"aria-expanded"?: (boolean | "true" | "false") | undefined;
|
|
96
|
-
"aria-flowto"?: string | undefined | undefined;
|
|
97
|
-
"aria-grabbed"?: (boolean | "true" | "false") | undefined;
|
|
98
|
-
"aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
|
|
99
|
-
"aria-hidden"?: (boolean | "true" | "false") | undefined;
|
|
100
|
-
"aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
|
|
101
|
-
"aria-keyshortcuts"?: string | undefined | undefined;
|
|
102
|
-
"aria-label"?: string | undefined | undefined;
|
|
103
|
-
"aria-labelledby"?: string | undefined | undefined;
|
|
104
|
-
"aria-level"?: number | undefined | undefined;
|
|
105
|
-
"aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
|
|
106
|
-
"aria-modal"?: (boolean | "true" | "false") | undefined;
|
|
107
|
-
"aria-multiline"?: (boolean | "true" | "false") | undefined;
|
|
108
|
-
"aria-multiselectable"?: (boolean | "true" | "false") | undefined;
|
|
109
|
-
"aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
|
|
110
|
-
"aria-owns"?: string | undefined | undefined;
|
|
111
|
-
"aria-placeholder"?: string | undefined | undefined;
|
|
112
|
-
"aria-posinset"?: number | undefined | undefined;
|
|
113
|
-
"aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
|
|
114
|
-
"aria-readonly"?: (boolean | "true" | "false") | undefined;
|
|
115
|
-
"aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
|
|
116
|
-
"aria-required"?: (boolean | "true" | "false") | undefined;
|
|
117
|
-
"aria-roledescription"?: string | undefined | undefined;
|
|
118
|
-
"aria-rowcount"?: number | undefined | undefined;
|
|
119
|
-
"aria-rowindex"?: number | undefined | undefined;
|
|
120
|
-
"aria-rowindextext"?: string | undefined | undefined;
|
|
121
|
-
"aria-rowspan"?: number | undefined | undefined;
|
|
122
|
-
"aria-selected"?: (boolean | "true" | "false") | undefined;
|
|
123
|
-
"aria-setsize"?: number | undefined | undefined;
|
|
124
|
-
"aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
|
|
125
|
-
"aria-valuemax"?: number | undefined | undefined;
|
|
126
|
-
"aria-valuemin"?: number | undefined | undefined;
|
|
127
|
-
"aria-valuenow"?: number | undefined | undefined;
|
|
128
|
-
"aria-valuetext"?: string | undefined | undefined;
|
|
129
|
-
children?: React.ReactNode;
|
|
130
|
-
dangerouslySetInnerHTML?: {
|
|
131
|
-
__html: string | TrustedHTML;
|
|
132
|
-
} | undefined;
|
|
133
|
-
onCopy?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
134
|
-
onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
135
|
-
onCut?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
136
|
-
onCutCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
137
|
-
onPaste?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
138
|
-
onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement> | undefined;
|
|
139
|
-
onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
140
|
-
onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
141
|
-
onCompositionStart?: React.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
142
|
-
onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
143
|
-
onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
144
|
-
onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement> | undefined;
|
|
145
|
-
onFocus?: React.FocusEventHandler<HTMLDivElement> | undefined;
|
|
146
|
-
onFocusCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
|
|
147
|
-
onBlur?: React.FocusEventHandler<HTMLDivElement> | undefined;
|
|
148
|
-
onBlurCapture?: React.FocusEventHandler<HTMLDivElement> | undefined;
|
|
149
|
-
onChange?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
150
|
-
onChangeCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
151
|
-
onBeforeInput?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
152
|
-
onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
153
|
-
onInput?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
154
|
-
onInputCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
155
|
-
onReset?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
156
|
-
onResetCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
157
|
-
onSubmit?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
158
|
-
onSubmitCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
159
|
-
onInvalid?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
160
|
-
onInvalidCapture?: React.FormEventHandler<HTMLDivElement> | undefined;
|
|
161
|
-
onLoad?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
162
|
-
onLoadCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
163
|
-
onError?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
164
|
-
onErrorCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
165
|
-
onKeyDown?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
166
|
-
onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
167
|
-
onKeyPress?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
168
|
-
onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
169
|
-
onKeyUp?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
170
|
-
onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
|
|
171
|
-
onAbort?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
172
|
-
onAbortCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
173
|
-
onCanPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
174
|
-
onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
175
|
-
onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
176
|
-
onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
177
|
-
onDurationChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
178
|
-
onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
179
|
-
onEmptied?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
180
|
-
onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
181
|
-
onEncrypted?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
182
|
-
onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
183
|
-
onEnded?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
184
|
-
onEndedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
185
|
-
onLoadedData?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
186
|
-
onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
187
|
-
onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
188
|
-
onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
189
|
-
onLoadStart?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
190
|
-
onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
191
|
-
onPause?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
192
|
-
onPauseCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
193
|
-
onPlay?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
194
|
-
onPlayCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
195
|
-
onPlaying?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
196
|
-
onPlayingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
197
|
-
onProgress?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
198
|
-
onProgressCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
199
|
-
onRateChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
200
|
-
onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
201
|
-
onSeeked?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
202
|
-
onSeekedCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
203
|
-
onSeeking?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
204
|
-
onSeekingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
205
|
-
onStalled?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
206
|
-
onStalledCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
207
|
-
onSuspend?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
208
|
-
onSuspendCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
209
|
-
onTimeUpdate?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
210
|
-
onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
211
|
-
onVolumeChange?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
212
|
-
onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
213
|
-
onWaiting?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
214
|
-
onWaitingCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
215
|
-
onAuxClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
216
|
-
onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
217
|
-
onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
218
|
-
onClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
219
|
-
onContextMenu?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
220
|
-
onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
221
|
-
onDoubleClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
222
|
-
onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
223
|
-
onDrag?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
224
|
-
onDragCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
225
|
-
onDragEnd?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
226
|
-
onDragEndCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
227
|
-
onDragEnter?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
228
|
-
onDragEnterCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
229
|
-
onDragExit?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
230
|
-
onDragExitCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
231
|
-
onDragLeave?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
232
|
-
onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
233
|
-
onDragOver?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
234
|
-
onDragOverCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
235
|
-
onDragStart?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
236
|
-
onDragStartCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
237
|
-
onDrop?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
238
|
-
onDropCapture?: React.DragEventHandler<HTMLDivElement> | undefined;
|
|
239
|
-
onMouseDown?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
240
|
-
onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
241
|
-
onMouseEnter?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
242
|
-
onMouseLeave?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
243
|
-
onMouseMove?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
244
|
-
onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
245
|
-
onMouseOut?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
246
|
-
onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
247
|
-
onMouseOver?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
248
|
-
onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
249
|
-
onMouseUp?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
250
|
-
onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement> | undefined;
|
|
251
|
-
onSelect?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
252
|
-
onSelectCapture?: React.ReactEventHandler<HTMLDivElement> | undefined;
|
|
253
|
-
onTouchCancel?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
254
|
-
onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
255
|
-
onTouchEnd?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
256
|
-
onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
257
|
-
onTouchMove?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
258
|
-
onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
259
|
-
onTouchStart?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
260
|
-
onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement> | undefined;
|
|
261
|
-
onPointerDown?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
262
|
-
onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
263
|
-
onPointerMove?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
264
|
-
onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
265
|
-
onPointerUp?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
266
|
-
onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
267
|
-
onPointerCancel?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
268
|
-
onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
269
|
-
onPointerEnter?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
270
|
-
onPointerLeave?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
271
|
-
onPointerOver?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
272
|
-
onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
273
|
-
onPointerOut?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
274
|
-
onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
275
|
-
onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
276
|
-
onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
277
|
-
onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
278
|
-
onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement> | undefined;
|
|
279
|
-
onScroll?: React.UIEventHandler<HTMLDivElement> | undefined;
|
|
280
|
-
onScrollCapture?: React.UIEventHandler<HTMLDivElement> | undefined;
|
|
281
|
-
onWheel?: React.WheelEventHandler<HTMLDivElement> | undefined;
|
|
282
|
-
onWheelCapture?: React.WheelEventHandler<HTMLDivElement> | undefined;
|
|
283
|
-
onAnimationStart?: React.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
284
|
-
onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
285
|
-
onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
286
|
-
onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
287
|
-
onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
288
|
-
onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement> | undefined;
|
|
289
|
-
onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
290
|
-
onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
291
|
-
onTransitionCancel?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
292
|
-
onTransitionCancelCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
293
|
-
onTransitionRun?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
294
|
-
onTransitionRunCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
295
|
-
onTransitionStart?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
296
|
-
onTransitionStartCapture?: React.TransitionEventHandler<HTMLDivElement> | undefined;
|
|
297
|
-
key?: React.Key | null | undefined;
|
|
298
|
-
orientation?: "horizontal" | "vertical" | undefined;
|
|
299
|
-
onValueChange?: ((value: string) => void) | undefined;
|
|
300
|
-
activationMode?: "automatic" | "manual" | undefined;
|
|
301
|
-
align?: import("../types/props.js").Align | undefined;
|
|
302
|
-
shape?: import("../types/props.js").Shape | undefined;
|
|
303
|
-
ref?: React.LegacyRef<HTMLDivElement> | undefined;
|
|
304
|
-
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
305
|
-
parameters: {
|
|
306
|
-
layout: string;
|
|
307
|
-
docs: {
|
|
308
|
-
description: {
|
|
309
|
-
component: string;
|
|
310
|
-
};
|
|
311
|
-
};
|
|
312
|
-
};
|
|
313
|
-
tags: string[];
|
|
314
|
-
args: {
|
|
315
|
-
defaultValue: string;
|
|
316
|
-
align: "left";
|
|
317
|
-
};
|
|
318
|
-
argTypes: {
|
|
319
|
-
defaultValue: {
|
|
320
|
-
description: string;
|
|
321
|
-
control: "text";
|
|
322
|
-
table: {
|
|
323
|
-
summary: string;
|
|
324
|
-
readonly: boolean;
|
|
325
|
-
};
|
|
326
|
-
};
|
|
327
|
-
value: {
|
|
328
|
-
description: string;
|
|
329
|
-
control: {
|
|
330
|
-
type: "radio";
|
|
331
|
-
};
|
|
332
|
-
options: string[];
|
|
333
|
-
};
|
|
334
|
-
align: {
|
|
335
|
-
description: string;
|
|
336
|
-
};
|
|
337
|
-
onValueChange: {
|
|
338
|
-
description: string;
|
|
339
|
-
action: string;
|
|
340
|
-
type: "function";
|
|
341
|
-
};
|
|
342
|
-
orientation: {
|
|
343
|
-
control: {
|
|
344
|
-
type: "inline-radio";
|
|
345
|
-
};
|
|
346
|
-
options: string[];
|
|
347
|
-
description: string;
|
|
348
|
-
table: {
|
|
349
|
-
defaultValue: {
|
|
350
|
-
summary: string;
|
|
351
|
-
};
|
|
352
|
-
};
|
|
353
|
-
};
|
|
354
|
-
dir: {
|
|
355
|
-
control: {
|
|
356
|
-
type: "inline-radio";
|
|
357
|
-
};
|
|
358
|
-
options: string[];
|
|
359
|
-
description: string;
|
|
360
|
-
table: {
|
|
361
|
-
defaultValue: {
|
|
362
|
-
summary: string;
|
|
363
|
-
};
|
|
364
|
-
};
|
|
365
|
-
};
|
|
366
|
-
};
|
|
367
|
-
};
|
|
368
|
-
export default meta;
|
|
369
|
-
type Story = StoryObj<typeof Tabs>;
|
|
370
|
-
export declare const Default: Story;
|
|
371
|
-
export declare const AlignCenter: Story;
|
|
372
|
-
export declare const AlignRight: Story;
|
|
373
|
-
export declare const Disabled: Story;
|