@anker-in/headless-ui 1.0.20-alpha.1761187553831 → 1.0.20-alpha.1761270530082

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.
Files changed (25) hide show
  1. package/dist/cjs/biz-components/Graphic/index.js +1 -1
  2. package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
  3. package/dist/cjs/biz-components/GraphicMore/index.js +1 -1
  4. package/dist/cjs/biz-components/GraphicMore/index.js.map +2 -2
  5. package/dist/cjs/biz-components/HeaderNavigation/index.js +1 -1
  6. package/dist/cjs/biz-components/HeaderNavigation/index.js.map +2 -2
  7. package/dist/cjs/biz-components/NavigationSearch/index.js +10 -1
  8. package/dist/cjs/biz-components/NavigationSearch/index.js.map +2 -2
  9. package/dist/cjs/biz-components/SearchPage/index.js +1 -1
  10. package/dist/cjs/biz-components/SearchPage/index.js.map +2 -2
  11. package/dist/cjs/biz-components/SelectStore/index.js +1 -1
  12. package/dist/cjs/biz-components/SelectStore/index.js.map +2 -2
  13. package/dist/esm/biz-components/Graphic/index.js +1 -1
  14. package/dist/esm/biz-components/Graphic/index.js.map +2 -2
  15. package/dist/esm/biz-components/GraphicMore/index.js +1 -1
  16. package/dist/esm/biz-components/GraphicMore/index.js.map +2 -2
  17. package/dist/esm/biz-components/HeaderNavigation/index.js +1 -1
  18. package/dist/esm/biz-components/HeaderNavigation/index.js.map +2 -2
  19. package/dist/esm/biz-components/NavigationSearch/index.js +10 -1
  20. package/dist/esm/biz-components/NavigationSearch/index.js.map +2 -2
  21. package/dist/esm/biz-components/SearchPage/index.js +1 -1
  22. package/dist/esm/biz-components/SearchPage/index.js.map +2 -2
  23. package/dist/esm/biz-components/SelectStore/index.js +1 -1
  24. package/dist/esm/biz-components/SelectStore/index.js.map +2 -2
  25. package/package.json +1 -1
package/dist/cjs/biz-components/NavigationSearch/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/NavigationSearch/index.tsx"],
4
- "sourcesContent": ["import { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n onSearch(searchValue)\n }\n },\n [isComposing, searchValue, onSearch]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n switch (item.type) {\n case 'Product':\n return `/products${item.path}?q=${searchValue.toLowerCase()}`\n case 'Article':\n return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n default:\n break\n }\n },\n [searchValue]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue])\n\n return (\n <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n <div className=\"laptop:h-[52px] text-black desktop:h-[60px] flex items-center pt-4 desktop:pt-6 pb-4 justify-between border-b border-b-gray-200\">\n <input\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"text-sm basis-[200px] focus-visible:!outline-none outline-none leading-[1.4] font-bold\"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"w-[1px] h-[20px] bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n\n <div className=\"flex flex-col gap-6 desktop:gap-12 text-black desktop:py-6 py-4\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-2\">\n <Text html={data?.suggestText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n className=\"!text-sm leading-[1.2] font-bold !p-0\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"flex flex-col mt-2\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"hover:bg-[#F5F5F7] hover:text-current no-underline w-full p-4\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"text-sm cursor-pointer leading-[1.4] font-bold\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm text-white font-bold', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, 7)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"text-sm pb-6 border-[#E4E5E6] border-b text-[#6D6D6F] leading-[1.4] font-bold\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"gap-3 laptop:gap-4 mt-3 laptop:mt-4\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"col-span-12 tablet:col-span-6 p-2 hover:bg-[#F5F5F7] laptop:p-3 desktop:p-4 laptop:col-span-3\"\n >\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n className=\"text-sm cursor-pointer line-clamp-1 leading-[1.4] font-bold\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className=\"text-sm text-white font-bold\"\n />\n </div>\n </div>\n </Link>\n {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105', className)}>\n <div className=\"shrink-0\">\n <Picture\n source={productImage}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold h-full !leading-[24px]\"\n />\n )}\n </div>\n <div>\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n </Link>\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"flex flex-wrap gap-3 laptop:gap-4\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n key={index}\n className=\"text-sm cursor-pointer hover:bg-[#F5F5F7] p-2 laptop:p-3 desktop:p-4 leading-[1.4] font-bold\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default NavigationSearch\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import { Picture, Text, Button, Container, Link, Heading, Grid, GridItem } from '../../components/index.js'\nimport { Search as SearchIcon, Close as CloseIcon } from '../HeaderNavigation/icons/index.js'\nimport { forwardRef, useCallback, useMemo, useState } from 'react'\nimport type { NavigationSearchProps } from './types.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\n\nimport { SearchStatus } from './types.js'\n\nimport { debounce } from 'es-toolkit'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\n\nexport const canSearch = (target: any) => {\n return !(\n target.metafields?.global?.HideSearch ||\n target.metafields?.seo?.hidden ||\n target.metafields?.seo?.setting?.noindex\n )\n}\n\nconst NavigationSearch = forwardRef<HTMLDivElement, NavigationSearchProps>(\n ({ data, onSearch, onClose, searchResult, isSearching, keywords }, ref) => {\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const [searchValue, setSearchValue] = useState('')\n const [isComposing, setIsComposing] = useState(false)\n\n const debouncedFunction = debounce((value: string) => {\n onSearch(value)\n }, 300)\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.key === 'Enter' && !isComposing) {\n onSearch(searchValue)\n }\n },\n [isComposing, searchValue, onSearch]\n )\n\n const searchKeywords = useMemo(() => {\n if (Array.isArray(keywords) && keywords?.length) {\n return keywords.map((keyword: any) => keyword.search_term)\n }\n if (Array.isArray(data?.popularWords) && data?.popularWords?.length) {\n return data?.popularWords.map((word: any) => word.popularWord)\n }\n return []\n }, [keywords, data?.popularWords])\n\n const getLink = useCallback(\n (item: any) => {\n switch (item.type) {\n case 'Product':\n return `/products${item.path}?q=${searchValue.toLowerCase()}`\n case 'Article':\n return `/blogs/${item.blog.handle}/${item.handle.replace('storefront-', '')}?q=${searchValue.toLowerCase()}`\n default:\n break\n }\n },\n [searchValue]\n )\n\n const searchStatus = useMemo(() => {\n if (!searchValue) {\n // \u6CA1\u6709\u641C\u7D22\u503C\n return SearchStatus.Default\n } else if (searchResult?.totalCount) {\n // \u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Predict\n } else if (!isSearching) {\n // \u6CA1\u6709\u641C\u7D22\u7ED3\u679C\n return SearchStatus.Empty\n }\n }, [searchResult?.totalCount, searchValue])\n\n return (\n <Container childClassName=\"!bg-white\" className=\"relative\" ref={ref}>\n <style jsx global>\n {`\n .navigation-search-component input:-webkit-autofill,\n .navigation-search-component input:-webkit-autofill:hover,\n .navigation-search-component input:-webkit-autofill:focus {\n -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* \u80CC\u666F\u900F\u660E */\n -webkit-text-fill-color: #000 !important;\n transition: background-color 9999s ease-in-out 0s !important;\n caret-color: #000;\n }\n `}\n </style>\n <div className=\"navigation-search-component laptop:h-[52px] text-black desktop:h-[60px] flex items-center pt-4 desktop:pt-6 pb-4 justify-between border-b border-b-gray-200\">\n <input\n value={searchValue}\n onCompositionStart={() => setIsComposing(true)}\n onCompositionEnd={() => setIsComposing(false)}\n onKeyDown={handleKeyDown}\n onChange={e => {\n setSearchValue(e.target.value)\n if (e.target.value) {\n debouncedFunction(e.target.value)\n }\n }}\n type=\"text\"\n className=\"text-sm basis-[200px] focus-visible:!outline-none outline-none leading-[1.4] font-bold\"\n placeholder={data?.placeholder}\n />\n <div className=\"flex items-center gap-3\">\n <SearchIcon className=\"size-5 cursor-pointer\" onClick={() => onSearch(searchValue)} />\n <div className=\"w-[1px] h-[20px] bg-[#E4E5E6]\" />\n <CloseIcon className=\"size-5 cursor-pointer\" onClick={onClose} />\n </div>\n </div>\n\n <div className=\"flex flex-col gap-6 desktop:gap-12 text-black desktop:py-6 py-4\">\n {searchStatus === SearchStatus.Predict ? (\n <>\n <div>\n <div className=\"flex items-center gap-2\">\n <Text html={data?.suggestText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n {searchResult?.items?.length > 6 && (\n <Button\n as=\"a\"\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${searchValue.toLowerCase()}`}\n className=\"!text-sm leading-[1.2] font-bold !p-0\"\n variant=\"link\"\n >\n {data?.moreText}\n </Button>\n )}\n </div>\n <div className=\"flex flex-col mt-2\">\n {searchResult?.items\n ?.filter((item: any) => canSearch(item))\n .slice(0, 6)\n ?.map((item: any) => (\n <Link\n className=\"hover:bg-[#F5F5F7] hover:text-current no-underline w-full p-4\"\n href={getLink(item)}\n key={item.id}\n >\n <Text\n html={highlightSearchWord(item.title, searchValue)}\n className=\"text-sm cursor-pointer leading-[1.4] font-bold\"\n />\n </Link>\n ))}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className={cn('font-bold text-white', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className={cn('text-sm text-white font-bold', {\n 'text-black': data?.advertisingTheme === 'dark',\n })}\n />\n </div>\n </div>\n </Link>\n {searchResult?.items\n ?.filter((item: any) => item.type.toLowerCase() === 'product')\n .slice(0, 7)\n ?.map((item: any) => {\n const variant = item?.variants?.[0]\n const productImage = `${variant?.image?.url || item?.images?.[0]?.url}`\n const productName = item?.title || item?.name\n const productDesc = item?.description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(variant?.id as string)}`\n return (\n <SearchProduct\n productImage={productImage}\n productName={productName}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n ) : (\n <>\n {searchStatus === SearchStatus.Empty && (\n <Text\n html={data?.noResultText}\n as=\"p\"\n className=\"text-sm pb-6 border-[#E4E5E6] border-b text-[#6D6D6F] leading-[1.4] font-bold\"\n />\n )}\n <div>\n <Text html={data?.popularText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"mt-2\">\n <SearchKeyword data={data} keywords={searchKeywords} locale={locale} />\n {Array.isArray(data?.popularPages) && !!data?.popularPages?.length && (\n <Grid className=\"gap-3 laptop:gap-4 mt-3 laptop:mt-4\">\n {data?.popularPages?.map((item: any) => (\n <GridItem\n key={item?.id}\n className=\"col-span-12 tablet:col-span-6 p-2 hover:bg-[#F5F5F7] laptop:p-3 desktop:p-4 laptop:col-span-3\"\n >\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${item?.popularPage.toLowerCase()}`}\n className=\"text-sm cursor-pointer line-clamp-1 leading-[1.4] font-bold\"\n >\n {item?.popularPage}\n </a>\n </GridItem>\n ))}\n </Grid>\n )}\n </div>\n </div>\n <div>\n <Text html={data?.hotProductsText} className=\"text-sm text-[#6D6D6F] leading-[1.4] font-bold\" />\n <div className=\"grid grid-cols-1 tablet:grid-cols-2 laptop:grid-cols-3 desktop:grid-cols-4 gap-2 mt-2 tablet:gap-x-3 tablet:gap-y-4 laptop:gap-4\">\n <Link asChild={!data?.advertisingLink} href={data?.advertisingLink}>\n <div className=\"relative [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Picture\n source={data?.advertisingBgImg?.url}\n className=\"h-[114px] laptop:h-[120px]\"\n imgClassName=\"object-cover h-full\"\n />\n <div className=\"absolute bottom-0 left-0 right-0 p-4\">\n <Heading\n size={2}\n html={data?.advertisingTitle || 'Buy in Guide'}\n className=\"font-bold text-white\"\n />\n <Text\n html={data?.advertisingSubtitle || '20.000mAh'}\n className=\"text-sm text-white font-bold\"\n />\n </div>\n </div>\n </Link>\n {data?.hotProducts?.slice(0, 7)?.map((item: any) => {\n const productDesc = item?.custom_description\n const productBadge = item?.badge || ''\n const listingLink = `/products/${item?.handle}?variant=${atobID(item?.shopify_id as string)}`\n return (\n <SearchProduct\n productImage={item?.image}\n productName={item?.name}\n productDesc={productDesc}\n productBadge={productBadge}\n listingLink={listingLink}\n key={item.id}\n />\n )\n })}\n </div>\n </div>\n </>\n )}\n </div>\n </Container>\n )\n }\n)\n\nconst SearchProduct = ({\n productImage,\n productName,\n productDesc,\n productBadge,\n className,\n listingLink,\n}: {\n productImage: string\n productName: string\n productDesc: string\n productBadge: string\n className?: string\n listingLink: string\n}) => {\n return (\n <div className={cn('flex shrink-0 gap-4 bg-[#F5F5F7] px-4 py-3 [&_img]:hover:scale-105', className)}>\n <div className=\"shrink-0\">\n <Picture\n source={productImage}\n width={90}\n height={90}\n className=\"size-[96px]\"\n imgClassName=\"object-contain h-full\"\n />\n </div>\n <div className=\"relative\">\n <div className=\" h-[24px] \">\n {productBadge && (\n <Text\n as=\"p\"\n html={productBadge}\n className=\"text-brand-0 mb-1 inline-block rounded-full border-[1.6px] border-[#00BEFA] px-[6px] text-sm font-bold h-full !leading-[24px]\"\n />\n )}\n </div>\n <div>\n <Link href={listingLink} className=\"no-underline hover:text-current\">\n <Text\n className=\"lg-desktop:h-[44px] lg-desktop:text-base line-clamp-2 h-[40px] text-sm font-bold leading-[1.4]\"\n html={productName}\n />\n </Link>\n {productDesc && (\n <Text\n as=\"p\"\n html={productDesc}\n className=\"lg-desktop:text-sm line-clamp-1 mt-1 text-xs font-bold leading-[1.4] text-[#6D6D6F]\"\n />\n )}\n </div>\n </div>\n </div>\n )\n}\n\nconst SearchKeyword = ({ data, keywords, locale }: { data: any; keywords: any[]; locale: string }) => {\n return (\n <div className=\"flex flex-wrap gap-3 laptop:gap-4\">\n {keywords?.map((keyword: any, index) => (\n <a\n href={`${locale === 'us' ? '' : locale}${data?.moreLink}?q=${keyword?.toLowerCase()}`}\n key={index}\n className=\"text-sm cursor-pointer hover:bg-[#F5F5F7] p-2 laptop:p-3 desktop:p-4 leading-[1.4] font-bold\"\n >\n {keyword}\n </a>\n ))}\n </div>\n )\n}\n\nexport default NavigationSearch\n"],
5
+ "mappings": "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",
6
6
  "names": ["NavigationSearch_exports", "__export", "canSearch", "NavigationSearch_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_AiuiProvider", "import_types", "import_es_toolkit", "import_utils", "target", "NavigationSearch", "data", "onSearch", "onClose", "searchResult", "isSearching", "keywords", "ref", "locale", "copyWriting", "searchValue", "setSearchValue", "isComposing", "setIsComposing", "debouncedFunction", "value", "handleKeyDown", "e", "searchKeywords", "keyword", "word", "getLink", "item", "searchStatus", "SearchIcon", "CloseIcon", "variant", "productImage", "productName", "productDesc", "productBadge", "listingLink", "SearchProduct", "SearchKeyword", "className", "index"]
7
7
  }
package/dist/cjs/biz-components/SearchPage/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";var _=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var j=(s,o)=>{for(var l in o)_(s,l,{get:o[l],enumerable:!0})},$=(s,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let c of O(o))!R.call(s,c)&&c!==l&&_(s,c,{get:()=>o[c],enumerable:!(n=A(o,c))||n.enumerable});return s};var F=s=>$(_({},"__esModule",{value:!0}),s);var H={};j(H,{default:()=>U});module.exports=F(H);var e=require("react/jsx-runtime"),t=require("../../components"),B=require("../HeaderNavigation/icons"),i=require("react"),d=require("../../helpers/utils.js"),k=require("../AiuiProvider/index.js"),I=require("../ShelfDisplay/shelfDisplay"),u=require("./types");const L=({product:s,onSecondaryButton:o,onPrimaryButton:l,searchValue:n,variantData:c})=>{const p=(0,i.useMemo)(()=>c||s?.variants?.[0],[s,c]),{locale:g="us",copyWriting:m}=(0,k.useAiuiContext)(),h=(0,i.useMemo)(()=>`/products/${s?.handle}?variant=${(0,d.atobID)(p?.id)}`,[s?.handle,p?.id]),x=p?.coupons?.[0],{price:r,basePrice:N}=(0,I.formatVariantPrice)({locale:g,amount:x?x.variant_price4wscode:p?.price,baseAmount:x?p?.price:0,currencyCode:s?.price?.currencyCode||"USD"}),y=(0,i.useMemo)(()=>s?.tags?.filter?.(b=>b?.startsWith?.("CLtag"))?.map?.(b=>b?.replace?.("CLtag:",""))?.slice?.(0,2),[s?.tags]);return(0,e.jsx)("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto",children:s?.type==="advertising"?(0,e.jsxs)(t.Link,{href:s?.advertisingLink,className:"relative h-full",children:[(0,e.jsx)(t.Picture,{source:s?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"absolute z-[2] left-0 right-0 bottom-0 top-0 p-4 desktop:p-6 [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[(0,e.jsx)(t.Text,{html:s?.advertisingTitle,className:"text-sm desktop:text-[18px] text-white font-bold"}),(0,e.jsx)(t.Heading,{size:3,html:s?.advertisingSubtitle,className:"font-bold mt-2 line-clamp-4 laptop:line-clamp-3 text-white"})]})]}):(0,e.jsxs)("a",{href:h,className:" no-underline h-full bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 flex flex-col desktop:p-6 desktop:pt-4 px-2 py-4 tablet:p-4",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(t.Picture,{className:"lg-desktop:w-[196px] lg-desktop:h-[196px] w-[138px] h-[138px] mx-auto",source:`${p?.image?.url||s?.images?.[0]?.url}}`,alt:s.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("div",{className:"ipc_search_product_item_content flex-1 mt-1 desktop:mt-2 lg-desktop:mt-3 flex flex-col justify-between desktop:gap-6 gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"flex gap-2 mb-2 lg-desktop:h-[28px] h-[24px] mb-1",children:y?.map(b=>(0,e.jsx)(t.Text,{as:"p",html:b,className:"text-brand-0 h-full rounded-full border-[1.6px] lg-desktop:px-2 px-[6px] border-[#00BEFA] text-sm font-bold !leading-[24px] lg-desktop:!leading-[28px]"}))}),(0,e.jsx)(t.Text,{className:"text-xl desktop:text-2xl font-bold !leading-[1.2] line-clamp-3 tablet:line-clamp-2",weight:"bold",html:(0,d.highlightSearchWord)(s?.title||"",n||"")}),(0,e.jsx)(t.Text,{as:"p",className:"text-sm lg-desktop:text-[18px] mt-1 font-bold line-clamp-2 tablet:line-clamp-1",html:(0,d.highlightSearchWord)(s.description,n||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:p?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold",children:p?.availableForSale&&r||""}),(0,e.jsx)("div",{className:"origin-price text-[18px] tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 font-bold line-through",children:p?.availableForSale&&N||""})]}):(0,e.jsx)("div",{className:"text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold",children:m?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,d.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 flex flex-col laptop:flex-row items-center gap-2"),children:[m?.learnMoreText&&(0,e.jsx)(t.Button,{variant:"secondary",className:"w-full laptop:w-auto",size:"lg",disabled:!p?.availableForSale,onClick:()=>o?.(),children:m?.learnMoreText}),m?.shopNowText&&(0,e.jsx)(t.Button,{variant:"primary",className:"w-full laptop:w-auto",size:"lg",disabled:!p?.availableForSale,onClick:()=>l?.(),children:m?.shopNowText})]})]})]})]})})},G=({blog:s,searchValue:o})=>{const{copyWriting:l}=(0,k.useAiuiContext)(),n=(0,i.useMemo)(()=>`blogs/${s?.handle}/${s?.handle.replace("storefront-","")}`,[s]);return(0,e.jsx)("div",{className:"ipc_search_blog_item py-6 border-b border-[#E4E5E6]",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content flex flex-col gap-4 laptop:flex-row-reverse laptop:gap-8 desktop:gap-16",children:[(0,e.jsx)("div",{className:"laptop:flex-[440] desktop:flex-[540] h-[240px] desktop:h-[280px]",children:(0,e.jsx)(t.Picture,{source:s?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:s?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] flex flex-col justify-center desktop:flex-[704] lg-desktop:flex-[1056]",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(s?.title,o)}),(0,e.jsx)(t.Text,{html:(0,d.highlightSearchWord)(s?.content,o),className:"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1 line-clamp-2"}),(0,e.jsx)("div",{className:"mt-4 desktop:mt-6",children:(0,e.jsx)(t.Button,{as:"a",href:n,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},W=({searchValue:s,page:o})=>{const{copyWriting:l,locale:n="us"}=(0,k.useAiuiContext)(),c=(0,i.useMemo)(()=>`${n==="us"?"":`/${n}`}/${o?.handle}`,[o,n]);return(0,e.jsxs)("div",{className:"ipc_search_page_items py-6 border-b border-[#E4E5E6]",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(o?.name,s)}),(0,e.jsx)(t.Text,{as:"p",html:(0,d.highlightSearchWord)(o?.bodySummary||"",s),className:"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1"}),(0,e.jsx)(t.Button,{as:"a",href:c,variant:"secondary",size:"lg",className:"mt-4 desktop:mt-6",children:l?.learnMoreText||"Learn More"})]})},S=({url:s,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col gap-4 items-center justify-center",children:[(0,e.jsx)(t.Picture,{source:s,className:"w-[240px] h-[180px]",imgClassName:"object-cover"}),(0,e.jsx)(t.Text,{html:o,className:"desktop:text-[18px] font-bold text-sm leading-[1.4]"})]}),P=({products:s,title:o,buildProps:l,onSecondaryButton:n,onPrimaryButton:c})=>{const{products:p}=l||{};return(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("div",{className:" grid grid-cols-2 gap-y-4 gap-x-3 mt-6 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4",children:s?.map((g,m)=>{const h=p?.find(r=>r.handle===g.handle),x=h?.variants?.find(r=>r.sku===g.sku);return(0,e.jsx)(L,{product:h,variantData:x,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>c?.()},g.id+m)})})]})},K=({searchResult:s,searchValue:o,data:l,onSecondaryButton:n,onPrimaryButton:c,onChangeSort:p,loading:g,searchResultCount:m,onChangeTab:h,buildProps:x})=>{const[r,N]=(0,i.useState)(l?.tabs?.[0]),y=(0,i.useRef)(!1),[b,D]=(0,i.useState)(!1),[T,E]=(0,i.useState)({[u.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[u.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.BLOGS)?.sortKeys?.[0],[u.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.PAGES)?.sortKeys?.[0]}),v=(0,i.useMemo)(()=>s?.products||[],[s]),w=(0,i.useMemo)(()=>s?.blogs||[],[s]),C=(0,i.useMemo)(()=>s?.pages||[],[s]),z=(0,i.useMemo)(()=>Object.values(m||{}).reduce((a,f)=>a+f,0),[m]),M=(0,i.useMemo)(()=>{const a={advertisingBgImg:r?.advertisingBgImg,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,type:"advertising"};return!y.current&&v?.length&&(v?.length>=8?(v?.splice(7,0,a),y.current=!0):(v?.push(a),y.current=!0)),v},[r,v]);return(0,e.jsxs)("div",{className:"ipc_search_page desktop:py-[128px] py-16 tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:l?.title?.replace("$totalCount",z?.toString())?.replace("$inputValue",`"${o}"`)}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(t.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(t.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(t.TabsTrigger,{onClick:()=>{N(a),h?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",m?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(t.DropdownMenu,{onOpenChange:D,children:[(0,e.jsx)(t.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"text-base mt-6 desktop:mt-0 leading-[1.2] font-bold flex items-center",children:[r?.sortLabel," ",T?.[r?.tabType]?.label," ",(0,e.jsx)(B.DownArrow,{className:(0,d.cn)("size-4 inline-block",{"rotate-180":b})})]})}),(0,e.jsx)(t.DropdownMenuContent,{align:"start",sideOffset:8,className:"bg-white py-2 !px-0 rounded-none",children:r?.sortKeys?.map(a=>(0,e.jsx)(t.DropdownMenuItem,{className:(0,d.cn)("px-3 laptop:px-4 py-4 text-sm laptop:text-base font-bold hover:bg-[#EAEAEC] hover:text-current",{"font-bold":T?.[r?.tabType]?.value===a.value}),onClick:()=>{y.current=!1,p?.(r?.tabType,a),E(f=>({...f,[r?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(t.TabsContent,{value:u.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:"grid grid-cols-2 gap-y-4 gap-x-3 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4",children:M?.map((a,f)=>(0,e.jsx)(L,{searchValue:o,product:a,onSecondaryButton:()=>n?.(a),onPrimaryButton:()=>c?.(a)},a.id+f))}),g?(0,e.jsx)("div",{className:"flex w-full mt-6 justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!v?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(P,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]}),(0,e.jsx)(t.TabsContent,{value:u.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[w?.map(a=>(0,e.jsx)(G,{blog:a,searchValue:o},a.id)),g?(0,e.jsx)("div",{className:"flex mt-6 justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!w?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(P,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(t.TabsContent,{value:u.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:C?.map((a,f)=>(0,e.jsx)(W,{page:a,searchValue:o},a.global_id+f))}),g?(0,e.jsx)("div",{className:"flex mt-6 justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!C?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(P,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})]})})]})};var U=K;
1
+ "use strict";var _=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var R=Object.prototype.hasOwnProperty;var j=(s,o)=>{for(var l in o)_(s,l,{get:o[l],enumerable:!0})},$=(s,o,l,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let c of O(o))!R.call(s,c)&&c!==l&&_(s,c,{get:()=>o[c],enumerable:!(n=A(o,c))||n.enumerable});return s};var F=s=>$(_({},"__esModule",{value:!0}),s);var H={};j(H,{default:()=>U});module.exports=F(H);var e=require("react/jsx-runtime"),t=require("../../components"),B=require("../HeaderNavigation/icons"),i=require("react"),d=require("../../helpers/utils.js"),k=require("../AiuiProvider/index.js"),I=require("../ShelfDisplay/shelfDisplay"),u=require("./types");const L=({product:s,onSecondaryButton:o,onPrimaryButton:l,searchValue:n,variantData:c})=>{const p=(0,i.useMemo)(()=>c||s?.variants?.[0],[s,c]),{locale:g="us",copyWriting:m}=(0,k.useAiuiContext)(),h=(0,i.useMemo)(()=>`/products/${s?.handle}?variant=${(0,d.atobID)(p?.id)}`,[s?.handle,p?.id]),x=p?.coupons?.[0],{price:r,basePrice:N}=(0,I.formatVariantPrice)({locale:g,amount:x?x.variant_price4wscode:p?.price,baseAmount:x?p?.price:0,currencyCode:s?.price?.currencyCode||"USD"}),y=(0,i.useMemo)(()=>s?.tags?.filter?.(b=>b?.startsWith?.("CLtag"))?.map?.(b=>b?.replace?.("CLtag:",""))?.slice?.(0,2),[s?.tags]);return(0,e.jsx)("div",{className:"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto relative",children:s?.type==="advertising"?(0,e.jsxs)(t.Link,{href:s?.advertisingLink,className:"h-full",children:[(0,e.jsx)(t.Picture,{source:s?.advertisingBgImg?.url,className:"size-full",imgClassName:"size-full object-cover"}),(0,e.jsxs)("div",{className:"absolute z-[2] left-0 right-0 bottom-0 top-0 p-4 desktop:p-6 [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300",children:[(0,e.jsx)(t.Text,{html:s?.advertisingTitle,className:"text-sm desktop:text-[18px] text-white font-bold"}),(0,e.jsx)(t.Heading,{size:3,html:s?.advertisingSubtitle,className:"font-bold mt-2 line-clamp-4 laptop:line-clamp-3 text-white"})]})]}):(0,e.jsxs)("a",{href:h,className:" no-underline h-full bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 flex flex-col desktop:p-6 desktop:pt-4 px-2 py-4 tablet:p-4",children:[(0,e.jsx)("div",{className:"ipc_search_product_item_image",children:(0,e.jsx)(t.Picture,{className:"lg-desktop:w-[196px] lg-desktop:h-[196px] w-[138px] h-[138px] mx-auto",source:`${p?.image?.url||s?.images?.[0]?.url}}`,alt:s.title,imgClassName:"object-cover size-full"})}),(0,e.jsxs)("div",{className:"ipc_search_product_item_content flex-1 mt-1 desktop:mt-2 lg-desktop:mt-3 flex flex-col justify-between desktop:gap-6 gap-4",children:[(0,e.jsxs)("div",{className:"flex-1",children:[(0,e.jsx)("div",{className:"flex gap-2 mb-2 lg-desktop:h-[28px] h-[24px] mb-1",children:y?.map(b=>(0,e.jsx)(t.Text,{as:"p",html:b,className:"text-brand-0 h-full rounded-full border-[1.6px] lg-desktop:px-2 px-[6px] border-[#00BEFA] text-sm font-bold !leading-[24px] lg-desktop:!leading-[28px]"}))}),(0,e.jsx)(t.Text,{className:"text-xl desktop:text-2xl font-bold !leading-[1.2] line-clamp-3 tablet:line-clamp-2",weight:"bold",html:(0,d.highlightSearchWord)(s?.title||"",n||"")}),(0,e.jsx)(t.Text,{as:"p",className:"text-sm lg-desktop:text-[18px] mt-1 font-bold line-clamp-2 tablet:line-clamp-1",html:(0,d.highlightSearchWord)(s.description,n||"")})]}),(0,e.jsxs)("div",{children:[(0,e.jsx)("div",{className:"mb-2 flex items-center",children:p?.availableForSale?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{className:"final-price text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold",children:p?.availableForSale&&r||""}),(0,e.jsx)("div",{className:"origin-price text-[18px] tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 font-bold line-through",children:p?.availableForSale&&N||""})]}):(0,e.jsx)("div",{className:"text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold",children:m?.soldOutText||"Sold Out"})}),(0,e.jsxs)("div",{className:(0,d.cn)("ipc_search_product_item_button_group","lg-desktop:gap-3 flex flex-col laptop:flex-row items-center gap-2"),children:[m?.learnMoreText&&(0,e.jsx)(t.Button,{variant:"secondary",className:"w-full laptop:w-auto",size:"lg",disabled:!p?.availableForSale,onClick:()=>o?.(),children:m?.learnMoreText}),m?.shopNowText&&(0,e.jsx)(t.Button,{variant:"primary",className:"w-full laptop:w-auto",size:"lg",disabled:!p?.availableForSale,onClick:()=>l?.(),children:m?.shopNowText})]})]})]})]})})},G=({blog:s,searchValue:o})=>{const{copyWriting:l}=(0,k.useAiuiContext)(),n=(0,i.useMemo)(()=>`blogs/${s?.handle}/${s?.handle.replace("storefront-","")}`,[s]);return(0,e.jsx)("div",{className:"ipc_search_blog_item py-6 border-b border-[#E4E5E6]",children:(0,e.jsxs)("div",{className:"ipc_search_blog_item_content flex flex-col gap-4 laptop:flex-row-reverse laptop:gap-8 desktop:gap-16",children:[(0,e.jsx)("div",{className:"laptop:flex-[440] desktop:flex-[540] h-[240px] desktop:h-[280px]",children:(0,e.jsx)(t.Picture,{source:s?.image?.url,className:"size-full",imgClassName:"size-full object-cover",alt:s?.title})}),(0,e.jsxs)("div",{className:"laptop:flex-[424] flex flex-col justify-center desktop:flex-[704] lg-desktop:flex-[1056]",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(s?.title,o)}),(0,e.jsx)(t.Text,{html:(0,d.highlightSearchWord)(s?.content,o),className:"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1 line-clamp-2"}),(0,e.jsx)("div",{className:"mt-4 desktop:mt-6",children:(0,e.jsx)(t.Button,{as:"a",href:n,variant:"secondary",size:"lg",children:l?.learnMoreText||"Learn More"})})]})]})})},W=({searchValue:s,page:o})=>{const{copyWriting:l,locale:n="us"}=(0,k.useAiuiContext)(),c=(0,i.useMemo)(()=>`${n==="us"?"":`/${n}`}/${o?.handle}`,[o,n]);return(0,e.jsxs)("div",{className:"ipc_search_page_items py-6 border-b border-[#E4E5E6]",children:[(0,e.jsx)(t.Heading,{size:3,html:(0,d.highlightSearchWord)(o?.name,s)}),(0,e.jsx)(t.Text,{as:"p",html:(0,d.highlightSearchWord)(o?.bodySummary||"",s),className:"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1"}),(0,e.jsx)(t.Button,{as:"a",href:c,variant:"secondary",size:"lg",className:"mt-4 desktop:mt-6",children:l?.learnMoreText||"Learn More"})]})},S=({url:s,label:o})=>(0,e.jsxs)("div",{className:"flex flex-col gap-4 items-center justify-center",children:[(0,e.jsx)(t.Picture,{source:s,className:"w-[240px] h-[180px]",imgClassName:"object-cover"}),(0,e.jsx)(t.Text,{html:o,className:"desktop:text-[18px] font-bold text-sm leading-[1.4]"})]}),P=({products:s,title:o,buildProps:l,onSecondaryButton:n,onPrimaryButton:c})=>{const{products:p}=l||{};return(0,e.jsxs)("div",{className:"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:o}),(0,e.jsx)("div",{className:" grid grid-cols-2 gap-y-4 gap-x-3 mt-6 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4",children:s?.map((g,m)=>{const h=p?.find(r=>r.handle===g.handle),x=h?.variants?.find(r=>r.sku===g.sku);return(0,e.jsx)(L,{product:h,variantData:x,onSecondaryButton:()=>n?.(),onPrimaryButton:()=>c?.()},g.id+m)})})]})},K=({searchResult:s,searchValue:o,data:l,onSecondaryButton:n,onPrimaryButton:c,onChangeSort:p,loading:g,searchResultCount:m,onChangeTab:h,buildProps:x})=>{const[r,N]=(0,i.useState)(l?.tabs?.[0]),y=(0,i.useRef)(!1),[b,D]=(0,i.useState)(!1),[T,E]=(0,i.useState)({[u.SearchPageTabType.PRODUCTS]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.PRODUCTS)?.sortKeys?.[0],[u.SearchPageTabType.BLOGS]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.BLOGS)?.sortKeys?.[0],[u.SearchPageTabType.PAGES]:l?.tabs?.find(a=>a.tabType===u.SearchPageTabType.PAGES)?.sortKeys?.[0]}),v=(0,i.useMemo)(()=>s?.products||[],[s]),w=(0,i.useMemo)(()=>s?.blogs||[],[s]),C=(0,i.useMemo)(()=>s?.pages||[],[s]),z=(0,i.useMemo)(()=>Object.values(m||{}).reduce((a,f)=>a+f,0),[m]),M=(0,i.useMemo)(()=>{const a={advertisingBgImg:r?.advertisingBgImg,advertisingTitle:r?.advertisingTitle,advertisingSubtitle:r?.advertisingSubtitle,advertisingLink:r?.advertisingLink,type:"advertising"};return!y.current&&v?.length&&(v?.length>=8?(v?.splice(7,0,a),y.current=!0):(v?.push(a),y.current=!0)),v},[r,v]);return(0,e.jsxs)("div",{className:"ipc_search_page desktop:py-[128px] py-16 tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4",children:[(0,e.jsx)(t.Heading,{size:4,weight:"bold",html:l?.title?.replace("$totalCount",z?.toString())?.replace("$inputValue",`"${o}"`)}),(0,e.jsx)("div",{className:"mt-6",children:(0,e.jsxs)(t.Tabs,{className:"ipc_search_page_tabs",defaultValue:"products",children:[(0,e.jsxs)("div",{className:"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between",children:[(0,e.jsx)(t.TabsList,{children:l?.tabs?.map(a=>(0,e.jsxs)(t.TabsTrigger,{onClick:()=>{N(a),h?.(a?.tabType)},defaultValue:"products",value:a.tabType,children:[a.label," (",m?.[a.tabType],")"]},a.id))}),(0,e.jsxs)(t.DropdownMenu,{onOpenChange:D,children:[(0,e.jsx)(t.DropdownMenuTrigger,{asChild:!0,children:(0,e.jsxs)("button",{className:"text-base mt-6 desktop:mt-0 leading-[1.2] font-bold flex items-center",children:[r?.sortLabel," ",T?.[r?.tabType]?.label," ",(0,e.jsx)(B.DownArrow,{className:(0,d.cn)("size-4 inline-block",{"rotate-180":b})})]})}),(0,e.jsx)(t.DropdownMenuContent,{align:"start",sideOffset:8,className:"bg-white py-2 !px-0 rounded-none",children:r?.sortKeys?.map(a=>(0,e.jsx)(t.DropdownMenuItem,{className:(0,d.cn)("px-3 laptop:px-4 py-4 text-sm laptop:text-base font-bold hover:bg-[#EAEAEC] hover:text-current",{"font-bold":T?.[r?.tabType]?.value===a.value}),onClick:()=>{y.current=!1,p?.(r?.tabType,a),E(f=>({...f,[r?.tabType]:a}))},children:a.label},a.id))})]})]}),(0,e.jsxs)(t.TabsContent,{value:u.SearchPageTabType.PRODUCTS,className:"ipc_search_page_tabs_products_content mt-6",children:[(0,e.jsx)("div",{className:"grid grid-cols-2 gap-y-4 gap-x-3 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4",children:M?.map((a,f)=>(0,e.jsx)(L,{searchValue:o,product:a,onSecondaryButton:()=>n?.(a),onPrimaryButton:()=>c?.(a)},a.id+f))}),g?(0,e.jsx)("div",{className:"flex w-full mt-6 justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!v?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(P,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]}),(0,e.jsx)(t.TabsContent,{value:u.SearchPageTabType.BLOGS,className:"ipc_search_page_tabs_blogs_content",children:(0,e.jsxs)("div",{children:[w?.map(a=>(0,e.jsx)(G,{blog:a,searchValue:o},a.id)),g?(0,e.jsx)("div",{className:"flex mt-6 justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!w?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(P,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})}),(0,e.jsxs)(t.TabsContent,{value:u.SearchPageTabType.PAGES,className:"ipc_search_page_tabs_pages_content",children:[(0,e.jsx)("div",{children:C?.map((a,f)=>(0,e.jsx)(W,{page:a,searchValue:o},a.global_id+f))}),g?(0,e.jsx)("div",{className:"flex mt-6 justify-center",children:(0,e.jsx)(t.LoadingDots,{})}):!C?.length&&(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(S,{url:l?.noResultImage?.url,label:l?.noResultLabel}),(0,e.jsx)(P,{products:l?.recommendProducts||[],buildProps:x,title:l?.recommendProductsTitle})]})]})]})})]})};var U=K;
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/SearchPage/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SearchPage/index.tsx"],
4
- "sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n LoadingDots,\n} from '../../components'\nimport { DownArrow } from '../HeaderNavigation/icons'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const listingLink = useMemo(() => {\n return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n }, [product?.handle, variant?.id])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant?.price,\n baseAmount: coupon ? variant?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto\">\n {product?.type === 'advertising' ? (\n <Link href={product?.advertisingLink} className=\"relative h-full\">\n <Picture\n source={product?.advertisingBgImg?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"absolute z-[2] left-0 right-0 bottom-0 top-0 p-4 desktop:p-6 [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Text html={product?.advertisingTitle} className=\"text-sm desktop:text-[18px] text-white font-bold\" />\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className=\"font-bold mt-2 line-clamp-4 laptop:line-clamp-3 text-white\"\n />\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\" no-underline h-full bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 flex flex-col desktop:p-6 desktop:pt-4 px-2 py-4 tablet:p-4\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:w-[196px] lg-desktop:h-[196px] w-[138px] h-[138px] mx-auto\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content flex-1 mt-1 desktop:mt-2 lg-desktop:mt-3 flex flex-col justify-between desktop:gap-6 gap-4\">\n <div className=\"flex-1\">\n <div className=\"flex gap-2 mb-2 lg-desktop:h-[28px] h-[24px] mb-1\">\n {tags?.map((tag: string) => (\n <Text\n as=\"p\"\n html={tag}\n className=\"text-brand-0 h-full rounded-full border-[1.6px] lg-desktop:px-2 px-[6px] border-[#00BEFA] text-sm font-bold !leading-[24px] lg-desktop:!leading-[28px]\"\n />\n ))}\n </div>\n <Text\n className=\"text-xl desktop:text-2xl font-bold !leading-[1.2] line-clamp-3 tablet:line-clamp-2\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"text-sm lg-desktop:text-[18px] mt-1 font-bold line-clamp-2 tablet:line-clamp-1\"\n html={highlightSearchWord(product.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price text-[18px] tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 flex flex-col laptop:flex-row items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"w-full laptop:w-auto\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onSecondaryButton?.()}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"w-full laptop:w-auto\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onPrimaryButton?.()}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting } = useAiuiContext()\n\n const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n return (\n <div className=\"ipc_search_blog_item py-6 border-b border-[#E4E5E6]\">\n <div className=\"ipc_search_blog_item_content flex flex-col gap-4 laptop:flex-row-reverse laptop:gap-8 desktop:gap-16\">\n <div className=\"laptop:flex-[440] desktop:flex-[540] h-[240px] desktop:h-[280px]\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] flex flex-col justify-center desktop:flex-[704] lg-desktop:flex-[1056]\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1 line-clamp-2\"\n />\n <div className=\"mt-4 desktop:mt-6\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n return (\n <div className=\"ipc_search_page_items py-6 border-b border-[#E4E5E6]\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"mt-4 desktop:mt-6\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col gap-4 items-center justify-center\">\n <Picture source={url} className=\"w-[240px] h-[180px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] font-bold text-sm leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" grid grid-cols-2 gap-y-4 gap-x-3 mt-6 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.id + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n searchResultCount,\n onChangeTab,\n buildProps,\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: currentTab?.advertisingBgImg,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div className=\"ipc_search_page desktop:py-[128px] py-16 tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4\">\n <Heading\n size={4}\n weight=\"bold\"\n html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"text-base mt-6 desktop:mt-0 leading-[1.2] font-bold flex items-center\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('size-4 inline-block', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" sideOffset={8} className=\"bg-white py-2 !px-0 rounded-none\">\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'px-3 laptop:px-4 py-4 text-sm laptop:text-base font-bold hover:bg-[#EAEAEC] hover:text-current',\n {\n 'font-bold': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\"grid grid-cols-2 gap-y-4 gap-x-3 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={product.id + index}\n product={product}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"flex w-full mt-6 justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"flex mt-6 justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"flex mt-6 justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import {\n Heading,\n Tabs,\n TabsList,\n TabsTrigger,\n TabsContent,\n Text,\n Picture,\n Link,\n Button,\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n LoadingDots,\n} from '../../components'\nimport { DownArrow } from '../HeaderNavigation/icons'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn, atobID, highlightSearchWord } from '../../helpers/utils.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { formatVariantPrice } from '../ShelfDisplay/shelfDisplay'\nimport type {\n SearchPageProps,\n SortKey,\n SearchProductItemProps,\n SearchBlogItemProps,\n SearchPageItemProps,\n SearchRecommendProductsProps,\n} from './types'\nimport { SearchPageTabType } from './types'\n\n/**\n * \u641C\u7D22\u5546\u54C1\n */\nconst SearchProductItem = ({\n product,\n onSecondaryButton,\n onPrimaryButton,\n searchValue,\n variantData,\n}: SearchProductItemProps) => {\n const variant = useMemo(() => variantData || product?.variants?.[0], [product, variantData])\n const { locale = 'us', copyWriting } = useAiuiContext()\n\n const listingLink = useMemo(() => {\n return `/products/${product?.handle}?variant=${atobID(variant?.id as string)}`\n }, [product?.handle, variant?.id])\n\n const coupon = variant?.coupons?.[0]\n\n const { price, basePrice } = formatVariantPrice({\n locale: locale,\n amount: coupon ? coupon.variant_price4wscode : variant?.price,\n baseAmount: coupon ? variant?.price : 0,\n currencyCode: product?.price?.currencyCode || 'USD',\n })\n\n const tags = useMemo(() => {\n return product?.tags\n ?.filter?.((item: any) => item?.startsWith?.('CLtag'))\n ?.map?.((item: any) => item?.replace?.('CLtag:', ''))\n ?.slice?.(0, 2)\n }, [product?.tags])\n\n return (\n <div className=\"ipc_search_product_item lg-desktop:h-[480px] desktop:h-[384px] laptop:h-[360px] h-auto relative\">\n {product?.type === 'advertising' ? (\n <Link href={product?.advertisingLink} className=\"h-full\">\n <Picture\n source={product?.advertisingBgImg?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n />\n <div className=\"absolute z-[2] left-0 right-0 bottom-0 top-0 p-4 desktop:p-6 [&_img]:hover:scale-105 [&_img]:hover:transition-all [&_img]:hover:duration-300\">\n <Text html={product?.advertisingTitle} className=\"text-sm desktop:text-[18px] text-white font-bold\" />\n <Heading\n size={3}\n html={product?.advertisingSubtitle}\n className=\"font-bold mt-2 line-clamp-4 laptop:line-clamp-3 text-white\"\n />\n </div>\n </Link>\n ) : (\n <a\n href={listingLink}\n className=\" no-underline h-full bg-[#EAEAEC] tablet:hover:bg-info-white duration-300 flex flex-col desktop:p-6 desktop:pt-4 px-2 py-4 tablet:p-4\"\n >\n <div className=\"ipc_search_product_item_image\">\n <Picture\n className=\"lg-desktop:w-[196px] lg-desktop:h-[196px] w-[138px] h-[138px] mx-auto\"\n source={`${variant?.image?.url || product?.images?.[0]?.url}}`}\n alt={product.title}\n imgClassName=\"object-cover size-full\"\n />\n </div>\n <div className=\"ipc_search_product_item_content flex-1 mt-1 desktop:mt-2 lg-desktop:mt-3 flex flex-col justify-between desktop:gap-6 gap-4\">\n <div className=\"flex-1\">\n <div className=\"flex gap-2 mb-2 lg-desktop:h-[28px] h-[24px] mb-1\">\n {tags?.map((tag: string) => (\n <Text\n as=\"p\"\n html={tag}\n className=\"text-brand-0 h-full rounded-full border-[1.6px] lg-desktop:px-2 px-[6px] border-[#00BEFA] text-sm font-bold !leading-[24px] lg-desktop:!leading-[28px]\"\n />\n ))}\n </div>\n <Text\n className=\"text-xl desktop:text-2xl font-bold !leading-[1.2] line-clamp-3 tablet:line-clamp-2\"\n weight=\"bold\"\n html={highlightSearchWord(product?.title || '', searchValue || '')}\n />\n <Text\n as=\"p\"\n className=\"text-sm lg-desktop:text-[18px] mt-1 font-bold line-clamp-2 tablet:line-clamp-1\"\n html={highlightSearchWord(product.description, searchValue || '')}\n />\n </div>\n <div>\n <div className=\"mb-2 flex items-center\">\n {!variant?.availableForSale ? (\n <div className=\"text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n {copyWriting?.soldOutText || 'Sold Out'}\n </div>\n ) : (\n <>\n <div className=\"final-price text-info-primary text-[18px] tablet:text-xl lg-desktop:text-2xl font-bold\">\n {variant?.availableForSale ? price || '' : ''}\n </div>\n <div className=\"origin-price text-[18px] tablet:text-xl lg-desktop:text-2xl text-info-secondary ml-1 font-bold line-through\">\n {variant?.availableForSale ? basePrice || '' : ''}\n </div>\n </>\n )}\n </div>\n <div\n className={cn(\n 'ipc_search_product_item_button_group',\n 'lg-desktop:gap-3 flex flex-col laptop:flex-row items-center gap-2'\n )}\n >\n {copyWriting?.learnMoreText && (\n <Button\n variant=\"secondary\"\n className=\"w-full laptop:w-auto\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onSecondaryButton?.()}\n >\n {copyWriting?.learnMoreText}\n </Button>\n )}\n {copyWriting?.shopNowText && (\n <Button\n variant=\"primary\"\n className=\"w-full laptop:w-auto\"\n size=\"lg\"\n disabled={!variant?.availableForSale}\n onClick={() => onPrimaryButton?.()}\n >\n {copyWriting?.shopNowText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </a>\n )}\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u6587\u7AE0\n */\nconst SearchBlogItem = ({ blog, searchValue }: SearchBlogItemProps) => {\n const { copyWriting } = useAiuiContext()\n\n const articleLink = useMemo(() => `blogs/${blog?.handle}/${blog?.handle.replace('storefront-', '')}`, [blog])\n\n return (\n <div className=\"ipc_search_blog_item py-6 border-b border-[#E4E5E6]\">\n <div className=\"ipc_search_blog_item_content flex flex-col gap-4 laptop:flex-row-reverse laptop:gap-8 desktop:gap-16\">\n <div className=\"laptop:flex-[440] desktop:flex-[540] h-[240px] desktop:h-[280px]\">\n <Picture\n source={blog?.image?.url}\n className=\"size-full\"\n imgClassName=\"size-full object-cover\"\n alt={blog?.title}\n />\n </div>\n <div className=\"laptop:flex-[424] flex flex-col justify-center desktop:flex-[704] lg-desktop:flex-[1056]\">\n <Heading size={3} html={highlightSearchWord(blog?.title, searchValue)} />\n <Text\n html={highlightSearchWord(blog?.content, searchValue)}\n className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1 line-clamp-2\"\n />\n <div className=\"mt-4 desktop:mt-6\">\n <Button as=\"a\" href={articleLink} variant=\"secondary\" size=\"lg\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n </div>\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPageItem = ({ searchValue, page }: SearchPageItemProps) => {\n const { copyWriting, locale = 'us' } = useAiuiContext()\n const pageLink = useMemo(() => `${locale === 'us' ? '' : `/${locale}`}/${page?.handle}`, [page, locale])\n return (\n <div className=\"ipc_search_page_items py-6 border-b border-[#E4E5E6]\">\n <Heading size={3} html={highlightSearchWord(page?.name, searchValue)} />\n <Text\n as=\"p\"\n html={highlightSearchWord(page?.bodySummary || '', searchValue)}\n className=\"text-sm lg-desktop:text-[18px] desktop:text-[16px] font-bold leading-[1.4] mt-1\"\n />\n <Button as=\"a\" href={pageLink} variant=\"secondary\" size=\"lg\" className=\"mt-4 desktop:mt-6\">\n {copyWriting?.learnMoreText || 'Learn More'}\n </Button>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u7ED3\u679C\u4E3A\u7A7A\n */\nconst SearchPageNoResult = ({ url, label }: { url: string; label: string }) => {\n return (\n <div className=\"flex flex-col gap-4 items-center justify-center\">\n <Picture source={url} className=\"w-[240px] h-[180px]\" imgClassName=\"object-cover\" />\n <Text html={label} className=\"desktop:text-[18px] font-bold text-sm leading-[1.4]\" />\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u63A8\u8350\u5546\u54C1\n */\nconst SearchRecommendProducts = ({\n products,\n title,\n buildProps,\n onSecondaryButton,\n onPrimaryButton,\n}: SearchRecommendProductsProps) => {\n const { products: buildProducts } = buildProps || {}\n return (\n <div className=\"ipc_search_recommend_product tablet:pt-[80px] laptop:pt-[96px] desktop:pt-[112px] lg-desktop:pt-[128px] pt-[64px]\">\n <Heading size={4} weight=\"bold\" html={title} />\n <div className=\" grid grid-cols-2 gap-y-4 gap-x-3 mt-6 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n {products?.map((product: any, index: number) => {\n const buildProduct = buildProducts?.find((buildProduct: any) => buildProduct.handle === product.handle)\n const variant = buildProduct?.variants?.find((variant: any) => variant.sku === product.sku)\n return (\n <SearchProductItem\n product={buildProduct}\n variantData={variant}\n key={product.id + index}\n onSecondaryButton={() => onSecondaryButton?.()}\n onPrimaryButton={() => onPrimaryButton?.()}\n />\n )\n })}\n </div>\n </div>\n )\n}\n\n/**\n * \u641C\u7D22\u9875\u9762\n */\nconst SearchPage = ({\n searchResult,\n searchValue,\n data,\n onSecondaryButton,\n onPrimaryButton,\n // loadMore,\n onChangeSort,\n loading,\n searchResultCount,\n onChangeTab,\n buildProps,\n}: SearchPageProps) => {\n const [currentTab, setCurrentTab] = useState<any>(data?.tabs?.[0])\n const isInsertAdvertising = useRef(false)\n const [isOpenSort, setIsOpenSort] = useState(false)\n const [currentSortKey, setCurrentSortKey] = useState<any>({\n [SearchPageTabType.PRODUCTS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PRODUCTS)\n ?.sortKeys?.[0],\n [SearchPageTabType.BLOGS]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.BLOGS)?.sortKeys?.[0],\n [SearchPageTabType.PAGES]: data?.tabs?.find((tab: any) => tab.tabType === SearchPageTabType.PAGES)?.sortKeys?.[0],\n })\n\n const searchProductsResult = useMemo(() => {\n return searchResult?.products || []\n }, [searchResult])\n\n const searchBlogsResult = useMemo(() => {\n return searchResult?.blogs || []\n }, [searchResult])\n\n const searchPagesResult = useMemo(() => {\n return searchResult?.pages || []\n }, [searchResult])\n\n const totalCount = useMemo(() => {\n return Object.values(searchResultCount || {}).reduce((acc, curr) => acc + curr, 0)\n }, [searchResultCount])\n\n const searchProductsResultWithAdvertising = useMemo(() => {\n const advertisingData = {\n advertisingBgImg: currentTab?.advertisingBgImg,\n advertisingTitle: currentTab?.advertisingTitle,\n advertisingSubtitle: currentTab?.advertisingSubtitle,\n advertisingLink: currentTab?.advertisingLink,\n type: 'advertising',\n }\n if (!isInsertAdvertising.current && !!searchProductsResult?.length) {\n if (searchProductsResult?.length >= 8) {\n searchProductsResult?.splice(7, 0, advertisingData)\n isInsertAdvertising.current = true\n } else {\n searchProductsResult?.push(advertisingData)\n isInsertAdvertising.current = true\n }\n }\n return searchProductsResult\n }, [currentTab, searchProductsResult])\n\n return (\n <div className=\"ipc_search_page desktop:py-[128px] py-16 tablet:px-8 laptop:px-16 desktop:px-16 lg-desktop:px-[calc(50%-832px)] px-4\">\n <Heading\n size={4}\n weight=\"bold\"\n html={data?.title?.replace('$totalCount', totalCount?.toString())?.replace('$inputValue', `\"${searchValue}\"`)}\n />\n <div className=\"mt-6\">\n <Tabs className=\"ipc_search_page_tabs\" defaultValue=\"products\">\n <div className=\"desktop:flex desktop:items-center desktop:flex-row desktop:gap-6 desktop:justify-between\">\n <TabsList>\n {data?.tabs?.map((tab: any) => (\n <TabsTrigger\n onClick={() => {\n setCurrentTab(tab)\n onChangeTab?.(tab?.tabType)\n }}\n key={tab.id}\n defaultValue=\"products\"\n value={tab.tabType}\n >\n {tab.label} ({searchResultCount?.[tab.tabType as keyof typeof searchResultCount]})\n </TabsTrigger>\n ))}\n </TabsList>\n <DropdownMenu onOpenChange={setIsOpenSort}>\n <DropdownMenuTrigger asChild>\n <button className=\"text-base mt-6 desktop:mt-0 leading-[1.2] font-bold flex items-center\">\n {currentTab?.sortLabel} {currentSortKey?.[currentTab?.tabType]?.label}{' '}\n <DownArrow\n className={cn('size-4 inline-block', {\n 'rotate-180': isOpenSort,\n })}\n />\n </button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"start\" sideOffset={8} className=\"bg-white py-2 !px-0 rounded-none\">\n {currentTab?.sortKeys?.map((sortKey: SortKey) => {\n return (\n <DropdownMenuItem\n className={cn(\n 'px-3 laptop:px-4 py-4 text-sm laptop:text-base font-bold hover:bg-[#EAEAEC] hover:text-current',\n {\n 'font-bold': currentSortKey?.[currentTab?.tabType]?.value === sortKey.value,\n }\n )}\n onClick={() => {\n isInsertAdvertising.current = false\n onChangeSort?.(currentTab?.tabType, sortKey)\n setCurrentSortKey((prev: any) => ({\n ...prev,\n [currentTab?.tabType]: sortKey,\n }))\n }}\n key={sortKey.id}\n >\n {sortKey.label}\n </DropdownMenuItem>\n )\n })}\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n <TabsContent value={SearchPageTabType.PRODUCTS} className=\"ipc_search_page_tabs_products_content mt-6\">\n <div className=\"grid grid-cols-2 gap-y-4 gap-x-3 tablet:grid-cols-3 desktop:grid-cols-4 desktop:gap-4\">\n {searchProductsResultWithAdvertising?.map((product: any, index: number) => (\n <SearchProductItem\n searchValue={searchValue}\n key={product.id + index}\n product={product}\n onSecondaryButton={() => onSecondaryButton?.(product)}\n onPrimaryButton={() => onPrimaryButton?.(product)}\n />\n ))}\n </div>\n {loading ? (\n <div className=\"flex w-full mt-6 justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchProductsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n <TabsContent value={SearchPageTabType.BLOGS} className=\"ipc_search_page_tabs_blogs_content\">\n <div>\n {searchBlogsResult?.map((blog: any) => (\n <SearchBlogItem key={blog.id} blog={blog} searchValue={searchValue} />\n ))}\n {loading ? (\n <div className=\"flex mt-6 justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchBlogsResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </div>\n </TabsContent>\n <TabsContent value={SearchPageTabType.PAGES} className=\"ipc_search_page_tabs_pages_content\">\n <div>\n {searchPagesResult?.map((page: any, index: number) => (\n <SearchPageItem key={page.global_id + index} page={page} searchValue={searchValue} />\n ))}\n </div>\n {loading ? (\n <div className=\"flex mt-6 justify-center\">\n <LoadingDots />\n </div>\n ) : (\n !searchPagesResult?.length && (\n <>\n <SearchPageNoResult url={data?.noResultImage?.url} label={data?.noResultLabel} />\n <SearchRecommendProducts\n products={data?.recommendProducts || []}\n buildProps={buildProps}\n title={data?.recommendProductsTitle}\n />\n </>\n )\n )}\n </TabsContent>\n </Tabs>\n </div>\n </div>\n )\n}\n\nexport default SearchPage\n"],
5
+ "mappings": "yaAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAqEU,IAAAI,EAAA,6BArEVC,EAgBO,4BACPC,EAA0B,qCAC1BC,EAAqD,iBACrDC,EAAgD,kCAChDC,EAA+B,oCAC/BC,EAAmC,wCASnCC,EAAkC,mBAKlC,MAAMC,EAAoB,CAAC,CACzB,QAAAC,EACA,kBAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,YAAAC,CACF,IAA8B,CAC5B,MAAMC,KAAU,WAAQ,IAAMD,GAAeJ,GAAS,WAAW,CAAC,EAAG,CAACA,EAASI,CAAW,CAAC,EACrF,CAAE,OAAAE,EAAS,KAAM,YAAAC,CAAY,KAAI,kBAAe,EAEhDC,KAAc,WAAQ,IACnB,aAAaR,GAAS,MAAM,eAAY,UAAOK,GAAS,EAAY,CAAC,GAC3E,CAACL,GAAS,OAAQK,GAAS,EAAE,CAAC,EAE3BI,EAASJ,GAAS,UAAU,CAAC,EAE7B,CAAE,MAAAK,EAAO,UAAAC,CAAU,KAAI,sBAAmB,CAC9C,OAAQL,EACR,OAAQG,EAASA,EAAO,qBAAuBJ,GAAS,MACxD,WAAYI,EAASJ,GAAS,MAAQ,EACtC,aAAcL,GAAS,OAAO,cAAgB,KAChD,CAAC,EAEKY,KAAO,WAAQ,IACZZ,GAAS,MACZ,SAAUa,GAAcA,GAAM,aAAa,OAAO,CAAC,GACnD,MAAOA,GAAcA,GAAM,UAAU,SAAU,EAAE,CAAC,GAClD,QAAQ,EAAG,CAAC,EACf,CAACb,GAAS,IAAI,CAAC,EAElB,SACE,OAAC,OAAI,UAAU,kGACZ,SAAAA,GAAS,OAAS,iBACjB,QAAC,QAAK,KAAMA,GAAS,gBAAiB,UAAU,SAC9C,oBAAC,WACC,OAAQA,GAAS,kBAAkB,IACnC,UAAU,YACV,aAAa,yBACf,KACA,QAAC,OAAI,UAAU,+IACb,oBAAC,QAAK,KAAMA,GAAS,iBAAkB,UAAU,mDAAmD,KACpG,OAAC,WACC,KAAM,EACN,KAAMA,GAAS,oBACf,UAAU,6DACZ,GACF,GACF,KAEA,QAAC,KACC,KAAMQ,EACN,UAAU,wIAEV,oBAAC,OAAI,UAAU,gCACb,mBAAC,WACC,UAAU,wEACV,OAAQ,GAAGH,GAAS,OAAO,KAAOL,GAAS,SAAS,CAAC,GAAG,GAAG,IAC3D,IAAKA,EAAQ,MACb,aAAa,yBACf,EACF,KACA,QAAC,OAAI,UAAU,6HACb,qBAAC,OAAI,UAAU,SACb,oBAAC,OAAI,UAAU,oDACZ,SAAAY,GAAM,IAAKE,MACV,OAAC,QACC,GAAG,IACH,KAAMA,EACN,UAAU,yJACZ,CACD,EACH,KACA,OAAC,QACC,UAAU,qFACV,OAAO,OACP,QAAM,uBAAoBd,GAAS,OAAS,GAAIG,GAAe,EAAE,EACnE,KACA,OAAC,QACC,GAAG,IACH,UAAU,iFACV,QAAM,uBAAoBH,EAAQ,YAAaG,GAAe,EAAE,EAClE,GACF,KACA,QAAC,OACC,oBAAC,OAAI,UAAU,yBACZ,SAACE,GAAS,oBAKT,oBACE,oBAAC,OAAI,UAAU,yFACZ,SAAAA,GAAS,kBAAmBK,GAAS,GACxC,KACA,OAAC,OAAI,UAAU,8GACZ,SAAAL,GAAS,kBAAmBM,GAAa,GAC5C,GACF,KAXA,OAAC,OAAI,UAAU,6EACZ,SAAAJ,GAAa,aAAe,WAC/B,EAWJ,KACA,QAAC,OACC,aAAW,MACT,uCACA,mEACF,EAEC,UAAAA,GAAa,kBACZ,OAAC,UACC,QAAQ,YACR,UAAU,uBACV,KAAK,KACL,SAAU,CAACF,GAAS,iBACpB,QAAS,IAAMJ,IAAoB,EAElC,SAAAM,GAAa,cAChB,EAEDA,GAAa,gBACZ,OAAC,UACC,QAAQ,UACR,UAAU,uBACV,KAAK,KACL,SAAU,CAACF,GAAS,iBACpB,QAAS,IAAMH,IAAkB,EAEhC,SAAAK,GAAa,YAChB,GAEJ,GACF,GACF,GACF,EAEJ,CAEJ,EAKMQ,EAAiB,CAAC,CAAE,KAAAC,EAAM,YAAAb,CAAY,IAA2B,CACrE,KAAM,CAAE,YAAAI,CAAY,KAAI,kBAAe,EAEjCU,KAAc,WAAQ,IAAM,SAASD,GAAM,MAAM,IAAIA,GAAM,OAAO,QAAQ,cAAe,EAAE,CAAC,GAAI,CAACA,CAAI,CAAC,EAE5G,SACE,OAAC,OAAI,UAAU,sDACb,oBAAC,OAAI,UAAU,uGACb,oBAAC,OAAI,UAAU,mEACb,mBAAC,WACC,OAAQA,GAAM,OAAO,IACrB,UAAU,YACV,aAAa,yBACb,IAAKA,GAAM,MACb,EACF,KACA,QAAC,OAAI,UAAU,2FACb,oBAAC,WAAQ,KAAM,EAAG,QAAM,uBAAoBA,GAAM,MAAOb,CAAW,EAAG,KACvE,OAAC,QACC,QAAM,uBAAoBa,GAAM,QAASb,CAAW,EACpD,UAAU,+FACZ,KACA,OAAC,OAAI,UAAU,oBACb,mBAAC,UAAO,GAAG,IAAI,KAAMc,EAAa,QAAQ,YAAY,KAAK,KACxD,SAAAV,GAAa,eAAiB,aACjC,EACF,GACF,GACF,EACF,CAEJ,EAKMW,EAAiB,CAAC,CAAE,YAAAf,EAAa,KAAAgB,CAAK,IAA2B,CACrE,KAAM,CAAE,YAAAZ,EAAa,OAAAD,EAAS,IAAK,KAAI,kBAAe,EAChDc,KAAW,WAAQ,IAAM,GAAGd,IAAW,KAAO,GAAK,IAAIA,CAAM,EAAE,IAAIa,GAAM,MAAM,GAAI,CAACA,EAAMb,CAAM,CAAC,EACvG,SACE,QAAC,OAAI,UAAU,uDACb,oBAAC,WAAQ,KAAM,EAAG,QAAM,uBAAoBa,GAAM,KAAMhB,CAAW,EAAG,KACtE,OAAC,QACC,GAAG,IACH,QAAM,uBAAoBgB,GAAM,aAAe,GAAIhB,CAAW,EAC9D,UAAU,kFACZ,KACA,OAAC,UAAO,GAAG,IAAI,KAAMiB,EAAU,QAAQ,YAAY,KAAK,KAAK,UAAU,oBACpE,SAAAb,GAAa,eAAiB,aACjC,GACF,CAEJ,EAKMc,EAAqB,CAAC,CAAE,IAAAC,EAAK,MAAAC,CAAM,OAErC,QAAC,OAAI,UAAU,kDACb,oBAAC,WAAQ,OAAQD,EAAK,UAAU,sBAAsB,aAAa,eAAe,KAClF,OAAC,QAAK,KAAMC,EAAO,UAAU,sDAAsD,GACrF,EAOEC,EAA0B,CAAC,CAC/B,SAAAC,EACA,MAAAC,EACA,WAAAC,EACA,kBAAA1B,EACA,gBAAAC,CACF,IAAoC,CAClC,KAAM,CAAE,SAAU0B,CAAc,EAAID,GAAc,CAAC,EACnD,SACE,QAAC,OAAI,UAAU,oHACb,oBAAC,WAAQ,KAAM,EAAG,OAAO,OAAO,KAAMD,EAAO,KAC7C,OAAC,OAAI,UAAU,8FACZ,SAAAD,GAAU,IAAI,CAACzB,EAAc6B,IAAkB,CAC9C,MAAMC,EAAeF,GAAe,KAAME,GAAsBA,EAAa,SAAW9B,EAAQ,MAAM,EAChGK,EAAUyB,GAAc,UAAU,KAAMzB,GAAiBA,EAAQ,MAAQL,EAAQ,GAAG,EAC1F,SACE,OAACD,EAAA,CACC,QAAS+B,EACT,YAAazB,EAEb,kBAAmB,IAAMJ,IAAoB,EAC7C,gBAAiB,IAAMC,IAAkB,GAFpCF,EAAQ,GAAK6B,CAGpB,CAEJ,CAAC,EACH,GACF,CAEJ,EAKME,EAAa,CAAC,CAClB,aAAAC,EACA,YAAA7B,EACA,KAAA8B,EACA,kBAAAhC,EACA,gBAAAC,EAEA,aAAAgC,EACA,QAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,WAAAV,CACF,IAAuB,CACrB,KAAM,CAACW,EAAYC,CAAa,KAAI,YAAcN,GAAM,OAAO,CAAC,CAAC,EAC3DO,KAAsB,UAAO,EAAK,EAClC,CAACC,EAAYC,CAAa,KAAI,YAAS,EAAK,EAC5C,CAACC,EAAgBC,CAAiB,KAAI,YAAc,CACxD,CAAC,oBAAkB,QAAQ,EAAGX,GAAM,MAAM,KAAMY,GAAaA,EAAI,UAAY,oBAAkB,QAAQ,GACnG,WAAW,CAAC,EAChB,CAAC,oBAAkB,KAAK,EAAGZ,GAAM,MAAM,KAAMY,GAAaA,EAAI,UAAY,oBAAkB,KAAK,GAAG,WAAW,CAAC,EAChH,CAAC,oBAAkB,KAAK,EAAGZ,GAAM,MAAM,KAAMY,GAAaA,EAAI,UAAY,oBAAkB,KAAK,GAAG,WAAW,CAAC,CAClH,CAAC,EAEKC,KAAuB,WAAQ,IAC5Bd,GAAc,UAAY,CAAC,EACjC,CAACA,CAAY,CAAC,EAEXe,KAAoB,WAAQ,IACzBf,GAAc,OAAS,CAAC,EAC9B,CAACA,CAAY,CAAC,EAEXgB,KAAoB,WAAQ,IACzBhB,GAAc,OAAS,CAAC,EAC9B,CAACA,CAAY,CAAC,EAEXiB,KAAa,WAAQ,IAClB,OAAO,OAAOb,GAAqB,CAAC,CAAC,EAAE,OAAO,CAACc,EAAKC,IAASD,EAAMC,EAAM,CAAC,EAChF,CAACf,CAAiB,CAAC,EAEhBgB,KAAsC,WAAQ,IAAM,CACxD,MAAMC,EAAkB,CACtB,iBAAkBf,GAAY,iBAC9B,iBAAkBA,GAAY,iBAC9B,oBAAqBA,GAAY,oBACjC,gBAAiBA,GAAY,gBAC7B,KAAM,aACR,EACA,MAAI,CAACE,EAAoB,SAAaM,GAAsB,SACtDA,GAAsB,QAAU,GAClCA,GAAsB,OAAO,EAAG,EAAGO,CAAe,EAClDb,EAAoB,QAAU,KAE9BM,GAAsB,KAAKO,CAAe,EAC1Cb,EAAoB,QAAU,KAG3BM,CACT,EAAG,CAACR,EAAYQ,CAAoB,CAAC,EAErC,SACE,QAAC,OAAI,UAAU,uHACb,oBAAC,WACC,KAAM,EACN,OAAO,OACP,KAAMb,GAAM,OAAO,QAAQ,cAAegB,GAAY,SAAS,CAAC,GAAG,QAAQ,cAAe,IAAI9C,CAAW,GAAG,EAC9G,KACA,OAAC,OAAI,UAAU,OACb,oBAAC,QAAK,UAAU,uBAAuB,aAAa,WAClD,qBAAC,OAAI,UAAU,2FACb,oBAAC,YACE,SAAA8B,GAAM,MAAM,IAAKY,MAChB,QAAC,eACC,QAAS,IAAM,CACbN,EAAcM,CAAG,EACjBR,IAAcQ,GAAK,OAAO,CAC5B,EAEA,aAAa,WACb,MAAOA,EAAI,QAEV,UAAAA,EAAI,MAAM,KAAGT,IAAoBS,EAAI,OAAyC,EAAE,MAJ5EA,EAAI,EAKX,CACD,EACH,KACA,QAAC,gBAAa,aAAcH,EAC1B,oBAAC,uBAAoB,QAAO,GAC1B,oBAAC,UAAO,UAAU,wEACf,UAAAJ,GAAY,UAAU,IAAEK,IAAiBL,GAAY,OAAO,GAAG,MAAO,OACvE,OAAC,aACC,aAAW,MAAG,sBAAuB,CACnC,aAAcG,CAChB,CAAC,EACH,GACF,EACF,KACA,OAAC,uBAAoB,MAAM,QAAQ,WAAY,EAAG,UAAU,mCACzD,SAAAH,GAAY,UAAU,IAAKgB,MAExB,OAAC,oBACC,aAAW,MACT,iGACA,CACE,YAAaX,IAAiBL,GAAY,OAAO,GAAG,QAAUgB,EAAQ,KACxE,CACF,EACA,QAAS,IAAM,CACbd,EAAoB,QAAU,GAC9BN,IAAeI,GAAY,QAASgB,CAAO,EAC3CV,EAAmBW,IAAe,CAChC,GAAGA,EACH,CAACjB,GAAY,OAAO,EAAGgB,CACzB,EAAE,CACJ,EAGC,SAAAA,EAAQ,OAFJA,EAAQ,EAGf,CAEH,EACH,GACF,GACF,KACA,QAAC,eAAY,MAAO,oBAAkB,SAAU,UAAU,6CACxD,oBAAC,OAAI,UAAU,wFACZ,SAAAF,GAAqC,IAAI,CAACpD,EAAc6B,OACvD,OAAC9B,EAAA,CACC,YAAaI,EAEb,QAASH,EACT,kBAAmB,IAAMC,IAAoBD,CAAO,EACpD,gBAAiB,IAAME,IAAkBF,CAAO,GAH3CA,EAAQ,GAAK6B,CAIpB,CACD,EACH,EACCM,KACC,OAAC,OAAI,UAAU,kCACb,mBAAC,gBAAY,EACf,EAEA,CAACW,GAAsB,WACrB,oBACE,oBAACzB,EAAA,CAAmB,IAAKY,GAAM,eAAe,IAAK,MAAOA,GAAM,cAAe,KAC/E,OAACT,EAAA,CACC,SAAUS,GAAM,mBAAqB,CAAC,EACtC,WAAYN,EACZ,MAAOM,GAAM,uBACf,GACF,GAGN,KACA,OAAC,eAAY,MAAO,oBAAkB,MAAO,UAAU,qCACrD,oBAAC,OACE,UAAAc,GAAmB,IAAK/B,MACvB,OAACD,EAAA,CAA6B,KAAMC,EAAM,YAAab,GAAlCa,EAAK,EAA0C,CACrE,EACAmB,KACC,OAAC,OAAI,UAAU,2BACb,mBAAC,gBAAY,EACf,EAEA,CAACY,GAAmB,WAClB,oBACE,oBAAC1B,EAAA,CAAmB,IAAKY,GAAM,eAAe,IAAK,MAAOA,GAAM,cAAe,KAC/E,OAACT,EAAA,CACC,SAAUS,GAAM,mBAAqB,CAAC,EACtC,WAAYN,EACZ,MAAOM,GAAM,uBACf,GACF,GAGN,EACF,KACA,QAAC,eAAY,MAAO,oBAAkB,MAAO,UAAU,qCACrD,oBAAC,OACE,SAAAe,GAAmB,IAAI,CAAC7B,EAAWU,OAClC,OAACX,EAAA,CAA4C,KAAMC,EAAM,YAAahB,GAAjDgB,EAAK,UAAYU,CAA6C,CACpF,EACH,EACCM,KACC,OAAC,OAAI,UAAU,2BACb,mBAAC,gBAAY,EACf,EAEA,CAACa,GAAmB,WAClB,oBACE,oBAAC3B,EAAA,CAAmB,IAAKY,GAAM,eAAe,IAAK,MAAOA,GAAM,cAAe,KAC/E,OAACT,EAAA,CACC,SAAUS,GAAM,mBAAqB,CAAC,EACtC,WAAYN,EACZ,MAAOM,GAAM,uBACf,GACF,GAGN,GACF,EACF,GACF,CAEJ,EAEA,IAAO5C,EAAQ0C",
6
6
  "names": ["SearchPage_exports", "__export", "SearchPage_default", "__toCommonJS", "import_jsx_runtime", "import_components", "import_icons", "import_react", "import_utils", "import_AiuiProvider", "import_shelfDisplay", "import_types", "SearchProductItem", "product", "onSecondaryButton", "onPrimaryButton", "searchValue", "variantData", "variant", "locale", "copyWriting", "listingLink", "coupon", "price", "basePrice", "tags", "item", "tag", "SearchBlogItem", "blog", "articleLink", "SearchPageItem", "page", "pageLink", "SearchPageNoResult", "url", "label", "SearchRecommendProducts", "products", "title", "buildProps", "buildProducts", "index", "buildProduct", "SearchPage", "searchResult", "data", "onChangeSort", "loading", "searchResultCount", "onChangeTab", "currentTab", "setCurrentTab", "isInsertAdvertising", "isOpenSort", "setIsOpenSort", "currentSortKey", "setCurrentSortKey", "tab", "searchProductsResult", "searchBlogsResult", "searchPagesResult", "totalCount", "acc", "curr", "searchProductsResultWithAdvertising", "advertisingData", "sortKey", "prev"]
7
7
  }
package/dist/cjs/biz-components/SelectStore/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use strict";"use client";var m=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var n=(s,l)=>{for(var a in l)m(s,a,{get:l[a],enumerable:!0})},x=(s,l,a,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of c(l))!g.call(s,t)&&t!==a&&m(s,t,{get:()=>l[t],enumerable:!(o=d(l,t))||o.enumerable});return s};var f=s=>x(m({},"__esModule",{value:!0}),s);var S={};n(S,{default:()=>I});module.exports=f(S);var e=require("react/jsx-runtime"),y=require("../../helpers/utils.js"),b=require("../SwiperBox/index.js"),i=require("../../shared/Styles.js"),p=require("../../components/index.js");const u=s=>{const{data:l,className:a}=s,{list:o}=l;return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:"",children:(0,e.jsx)("div",{className:"grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4",children:o.map((t,r)=>(0,e.jsxs)("div",{className:" relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden",children:[(0,e.jsx)(p.Picture,{className:"w-full",imgClassName:"",source:`${t?.img?.url}, ${t?.padImg?.url} 1439, ${t?.miniImg?.url} 1023, ${t?.mobileImg?.url} 767`}),(0,e.jsxs)("div",{className:"absolute bottom-0 left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]",children:[(0,e.jsx)(p.Text,{html:t?.title,className:"text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]"}),(0,e.jsx)(p.Text,{html:t?.desc,className:"text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]"})]})]},r))})})})};var I=(0,i.withLayout)(u);
1
+ "use strict";"use client";var m=Object.defineProperty;var r=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var x=(p,l)=>{for(var o in l)m(p,o,{get:l[o],enumerable:!0})},n=(p,l,o,a)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of c(l))!g.call(p,t)&&t!==o&&m(p,t,{get:()=>l[t],enumerable:!(a=r(l,t))||a.enumerable});return p};var f=p=>n(m({},"__esModule",{value:!0}),p);var S={};x(S,{default:()=>I});module.exports=f(S);var e=require("react/jsx-runtime"),y=require("../../helpers/utils.js"),b=require("../SwiperBox/index.js"),d=require("../../shared/Styles.js"),s=require("../../components/index.js");const u=p=>{const{data:l,className:o}=p,{list:a}=l;return(0,e.jsx)(e.Fragment,{children:(0,e.jsx)("div",{className:"",children:(0,e.jsx)("div",{className:"grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4",children:a.map((t,i)=>(0,e.jsxs)("div",{className:" relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden",children:[(0,e.jsx)(s.Picture,{className:"w-full",imgClassName:"",source:`${t?.img?.url}, ${t?.padImg?.url} 1439, ${t?.miniImg?.url} 1023, ${t?.mobileImg?.url} 767`}),(0,e.jsxs)("div",{className:"absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]",children:[(0,e.jsx)(s.Text,{html:t?.title,className:"text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]"}),(0,e.jsx)(s.Text,{html:t?.desc,className:"text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]"})]})]},i))})})})};var I=(0,d.withLayout)(u);
2
2
  //# sourceMappingURL=index.js.map
package/dist/cjs/biz-components/SelectStore/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/SelectStore/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n <Picture\n className=\"w-full\"\n imgClassName=\"\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className='absolute bottom-0 left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n </div>\n ))}\n </div>\n {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n <div className=\"flex flex-col justify-center flex-1\">\n \n {item?.pay && (\n <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n {item?.pay?.map((pay, ind)=>{\n return (\n <div key={ind} className='laptop:w-[60px] w-[48px]'>\n <Picture\n className=\" w-full\"\n imgClassName=\"\"\n source={pay?.img?.url}\n alt={pay?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n )}\n \n {\n item?.delivery && (\n <div className='flex gap-[24px] items-center justify-center'>\n {item?.delivery?.map((delivery, ind)=>{\n return (\n <div key={ind} className=''>\n <Picture\n className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n imgClassName=\"\"\n source={delivery?.img?.url}\n alt={delivery?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n ) \n }\n \n {\n item?.service && (\n <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n {item?.service?.map((service, ind)=>{\n // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n const isFifth = ind === 4;\n return (\n <div key={ind} className={`\n flex flex-col items-center desktop:h-full w-[157px] justify-start desktop:w-[81px]\n ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n `}>\n <div className='w-[70px] desktop:w-[54px]'>\n <Picture\n className=\"\"\n imgClassName=\"w-full h-auto\"\n source={service?.img?.url}\n alt={service?.img?.alt || ''}\n />\n </div>\n <div className='text-center'>\n <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n </div>\n </div>\n )\n })}\n </div>\n )\n }\n </div>\n <div className='mt-auto'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n \n </div>\n </div>\n ))}\n </div> */}\n </div>\n </>\n )\n}\n\nexport default withLayout(SelectStore)\n"],
5
- "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCI,IAAAI,EAAA,6BArCJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,SACE,mBACE,mBAAC,OAAI,UAAU,GACb,mBAAC,OAAI,UAAU,gEACZ,SAAAE,EAAK,IAAI,CAACC,EAAMC,OACf,QAAC,OAAgB,UAAU,qIACnB,oBAAC,WACC,UAAU,SACV,aAAa,GACb,OAAQ,GAAGD,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,KACJ,QAAC,OAAI,UAAU,wEACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,0FAAyF,KAC5H,OAAC,QAAK,KAAMA,GAAM,KAAM,UAAU,+EAA8E,GAClH,IATMC,CAUV,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWO,CAAW",
4
+ "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type SelectStoreDataType = {\n title: string\n desc: string\n img: Img\n mobileImg: Img\n padImg: Img\n miniImg: Img\n // pay: {\n // img: Img\n // }[]\n // delivery: {\n // img: Img\n // }[]\n // service: {\n // title: string\n // img: Img\n // }[]\n}\n\ntype SelectStoreType = {\n data: {\n list: SelectStoreDataType[]\n }\n className?: string\n}\n\nconst SelectStore = (props: SelectStoreType) => {\n const { data, className } = props\n const { list } = data\n // const number = list?.[2]?.service?.length || 0\n return (\n <>\n <div className=''>\n <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className=' relative rounded-2xl lg-desktop:aspect-[543/320] laptop:aspect-[440/280] tablet:aspect-[346/240] aspect-[358/240] overflow-hidden'>\n <Picture\n className=\"w-full\"\n imgClassName=\"\"\n source={`${item?.img?.url}, ${item?.padImg?.url} 1439, ${item?.miniImg?.url} 1023, ${item?.mobileImg?.url} 767`}\n />\n <div className='absolute laptop:bottom-[24px] lg-desktop:bottom-[32px] bottom-[16px] left-0 laptop:p-[24px] lg-desktop:p-[32px] p-[16px]'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n </div>\n ))}\n </div>\n {/* <div className='grid desktop:grid-cols-3 tablet:grid-cols-2 grid-cols-1 gap-4'>\n {list.map((item, index) => (\n <div key={index} className='bg-[#EAEAEC] rounded-2xl min-h-[240px] laptop:min-h-[280px] lg-desktop:min-h-[320px]'>\n <div className='flex flex-col laptop:p-[24px] lg-desktop:p-[32px] p-[16px] justify-start h-full'>\n <div className=\"flex flex-col justify-center flex-1\">\n \n {item?.pay && (\n <div className='flex gap-[16px] flex-wrap items-center justify-center laptop:gap-[24px]'>\n {item?.pay?.map((pay, ind)=>{\n return (\n <div key={ind} className='laptop:w-[60px] w-[48px]'>\n <Picture\n className=\" w-full\"\n imgClassName=\"\"\n source={pay?.img?.url}\n alt={pay?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n )}\n \n {\n item?.delivery && (\n <div className='flex gap-[24px] items-center justify-center'>\n {item?.delivery?.map((delivery, ind)=>{\n return (\n <div key={ind} className=''>\n <Picture\n className={` ${ind === 0 ? 'laptop:w-[174px] w-[116px]' : 'laptop:w-[75px] w-[50px]'}`}\n imgClassName=\"\"\n source={delivery?.img?.url}\n alt={delivery?.img?.alt || ''}\n />\n </div>\n )\n })}\n </div>\n ) \n }\n \n {\n item?.service && (\n <div className=' desktop:gap-[24px] gap-[8px] tablet:gap-[12px] laptop:gap-[28px] grid l-tablet:grid-cols-2 tablet:flex flex-wrap desktop:grid-cols-4 items-center justify-center'>\n {item?.service?.map((service, ind)=>{\n // \u5224\u65AD\uFF1A\u53EA\u5BF9\u7B2C\u4E94\u6761\uFF08index === 4\uFF09\u5E94\u7528\u54CD\u5E94\u5F0F\u663E\u793A/\u9690\u85CF\n const isFifth = ind === 4;\n return (\n <div key={ind} className={`\n flex flex-col items-center desktop:h-full w-[157px] justify-start desktop:w-[81px]\n ${isFifth ? 'laptop:flex desktop:hidden hidden' : ''} \n `}>\n <div className='w-[70px] desktop:w-[54px]'>\n <Picture\n className=\"\"\n imgClassName=\"w-full h-auto\"\n source={service?.img?.url}\n alt={service?.img?.alt || ''}\n />\n </div>\n <div className='text-center'>\n <Text html={service?.title} className=' font-bold text-[12px] mt-[8px] leading-[1.4]' />\n </div>\n </div>\n )\n })}\n </div>\n )\n }\n </div>\n <div className='mt-auto'>\n <Text html={item?.title} className='text-[20px] lg-desktop:text-[24px] [&_*_strong]:!font-bold leading-[1.2] text-[#1d1d1f]'/>\n <Text html={item?.desc} className='text-[14px] line-clamp-1 lg-desktop:text-[16px] leading-[1.4] text-[#1d1d1f]'/>\n </div>\n \n </div>\n </div>\n ))}\n </div> */}\n </div>\n </>\n )\n}\n\nexport default withLayout(SelectStore)\n"],
5
+ "mappings": "sbAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAsCI,IAAAI,EAAA,6BArCJC,EAAmB,kCACnBC,EAAsB,iCAEtBC,EAA2B,kCAC3BC,EAA8B,qCA4B9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,KAAAG,CAAK,EAAIF,EAEjB,SACE,mBACE,mBAAC,OAAI,UAAU,GACb,mBAAC,OAAI,UAAU,gEACZ,SAAAE,EAAK,IAAI,CAACC,EAAMC,OACf,QAAC,OAAgB,UAAU,qIACnB,oBAAC,WACC,UAAU,SACV,aAAa,GACb,OAAQ,GAAGD,GAAM,KAAK,GAAG,KAAKA,GAAM,QAAQ,GAAG,UAAUA,GAAM,SAAS,GAAG,UAAUA,GAAM,WAAW,GAAG,OAC3G,KACJ,QAAC,OAAI,UAAU,2HACb,oBAAC,QAAK,KAAMA,GAAM,MAAO,UAAU,0FAAyF,KAC5H,OAAC,QAAK,KAAMA,GAAM,KAAM,UAAU,+EAA8E,GAClH,IATMC,CAUV,CACD,EACH,EAiFF,EACF,CAEJ,EAEA,IAAOb,KAAQ,cAAWO,CAAW",
6
6
  "names": ["SelectStore_exports", "__export", "SelectStore_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_SwiperBox", "import_Styles", "import_components", "SelectStore", "props", "data", "className", "list", "item", "index"]
7
7
  }
package/dist/esm/biz-components/Graphic/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as t,jsxs as a}from"react/jsx-runtime";import{useMediaQuery as S}from"react-responsive";import B,{useEffect as D,useImperativeHandle as E,useRef as w,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z,Picture as f,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as q}from"../VideoModal/index.js";import{TextModal as Y}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",_=({data:e,configuration:o})=>{const d=w(null),u=()=>{switch(o.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return y(d,{componentType:n,componentName:p,componentTitle:e?.title,componentDescription:e?.description,position:o?.index+1}),t("div",{ref:d,className:m(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":o?.itemShape==="round"}),children:a("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:k(e?.href||"",`${n}_${p}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),a("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[a("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[a("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:i=>{i.preventDefault(),i.stopPropagation(),o?.onVideoPlayBtnClick?.(o?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:i=>{i.preventDefault(),i.stopPropagation(),o?.onIconClick?.(e,o)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:k(e?.href,`${n}_${p}`),"data-headless-nav-postion":`''#${o?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},T=B.forwardRef(({data:e,className:o},d)=>{const u=S({query:"(max-width: 768px)"}),i=w(null),[N,b]=r(!1),[g,M]=r(""),[I,V]=r(""),[C,P]=r(""),[$,x]=r(null),[G,v]=r(!1),h=l=>{const s=e?.items?.length>3,c=e?.items?.length>2;switch(l){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return e?.items?.length===1?1:s||c?2.3:2;default:return 1.2}};return E(d,()=>i.current),y(i,{componentType:n,componentName:p,componentTitle:e?.title}),D(()=>{const l=i.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let s=0;l.forEach(c=>{s=Math.max(s,c.offsetHeight)}),l.forEach(c=>{c.style.height=`${s}px`})}},[]),a("div",{className:m("graphicBlock",o),ref:i,children:[a("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(l,s)=>{b(!0),s?.isYouTube?V?.(s?.youtubeId||""):(M?.(s?.video?.url||""),P?.(s?.mobileVideo?.url||""))},onIconClick:l=>{v(!0),x(l)},title:e?.title}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:h()},768:{spaceBetween:16,freeMode:!1,slidesPerView:h(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:h(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:h(1440)}}})]}),t(q,{visible:N,youTubeId:I,onCloseModal:()=>b(!1),videoUrl:u&&C||g}),t(Y,{textVisible:G,extension:$?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});T.displayName="Graphic";var se=H(T);export{se as default};
1
+ "use client";import{jsx as t,jsxs as c}from"react/jsx-runtime";import{useMediaQuery as S}from"react-responsive";import B,{useEffect as D,useImperativeHandle as E,useRef as w,useState as r}from"react";import{cn as m}from"../../helpers/utils.js";import{withLayout as H}from"../../shared/Styles.js";import L from"../SwiperBox/index.js";import{Button as U,Heading as z,Picture as f,Text as j}from"../../components/index.js";import R from"../Title/index.js";import{VideoModal as q}from"../VideoModal/index.js";import{TextModal as Y}from"../TextModal/index.js";import{useExposure as y}from"../../hooks/useExposure.js";import{trackUrlRef as k}from"../../shared/trackUrlRef.js";const n="image",p="graphic",_=({data:e,configuration:i})=>{const h=w(null),u=()=>{switch(i.num){case 1:return"tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]";case 2:return"tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]";case 3:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]";default:return"tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]"}};return y(h,{componentType:n,componentName:p,componentTitle:e?.title,componentDescription:e?.description,position:i?.index+1}),t("div",{ref:h,className:m(u(),"graphicItem","laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]",{"aiui-dark":e.theme==="dark"}),children:t("div",{className:m("absolute inset-0",{"rounded-xl overflow-hidden laptop:rounded-2xl":i?.itemShape==="round"}),children:c("div",{className:"relative block size-full cursor-pointer overflow-hidden",children:[e?.href?t("a",{"aria-label":e?.title??e?.description,href:k(e?.href||"",`${n}_${p}`),className:"block size-full cursor-pointer overflow-hidden","data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}`,children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}):t("div",{className:"block size-full cursor-pointer overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url,alt:e?.imgUrl?.alt||""})}),c("div",{className:"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4",children:[c("div",{className:m("flex items-end overflow-hidden","graphic-bottom"),children:[c("div",{className:"flex-1 overflow-hidden",children:[t(j,{html:e?.title,style:{color:e?.textColor},className:"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]"}),e?.description&&t(z,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]"})]}),!e?.isShowIcon&&(e?.video?.url||e?.youtubeId)&&t("button",{"aria-label":"Play Video",onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onVideoPlayBtnClick?.(i?.index||0,e)},className:"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75",children:t("svg",{width:"12",height:"14",viewBox:"0 0 12 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t("path",{d:"M12 7L0 14L0 0L12 7Z",fill:"white"})})}),e?.isShowIcon&&e?.icon?.url&&t("button",{onClick:o=>{o.preventDefault(),o.stopPropagation(),i?.onIconClick?.(e,i)},className:"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden",children:t(f,{className:"h-full",imgClassName:"h-full object-cover",source:e?.icon?.url,alt:e?.icon?.alt||""})})]}),e.buttonText&&t(U,{as:"a","aria-label":e?.title??e?.description,variant:"secondary",className:"mt-[8px] self-start",href:k(e?.href,`${n}_${p}`),"data-headless-nav-postion":`''#${i?.index+1}`,"data-headless-type-name":`${n}#${p}`,"data-headless-title-desc-button":`${e?.title}#${e?.description}#${e?.buttonText}`,children:e.buttonText})]})]})})})},T=B.forwardRef(({data:e,className:i},h)=>{const u=S({query:"(max-width: 768px)"}),o=w(null),[N,b]=r(!1),[g,M]=r(""),[I,V]=r(""),[C,P]=r(""),[$,x]=r(null),[G,v]=r(!1),d=l=>{const s=e?.items?.length>3,a=e?.items?.length>2;switch(l){case 1440:return s?4:e?.items?.length;case 1024:return s?3:e?.items?.length;case 768:return e?.items?.length===1?1:s||a?2.3:2;default:return e?.items?.length===1?1:1.2}};return E(h,()=>o.current),y(o,{componentType:n,componentName:p,componentTitle:e?.title}),D(()=>{const l=o.current?.querySelectorAll(".graphic-description");if(l&&l.length>0){let s=0;l.forEach(a=>{s=Math.max(s,a.offsetHeight)}),l.forEach(a=>{a.style.height=`${s}px`})}},[]),c("div",{className:m("graphicBlock",i),ref:o,children:[c("div",{className:"graphic-box",children:[e?.title&&t(R,{data:{title:e?.title}}),t(L,{id:"Graphic",className:m("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0,onVideoPlayBtnClick:(l,s)=>{b(!0),s?.isYouTube?V?.(s?.youtubeId||""):(M?.(s?.video?.url||""),P?.(s?.mobileVideo?.url||""))},onIconClick:l=>{v(!0),x(l)},title:e?.title}},Slide:_,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:d()},768:{spaceBetween:16,freeMode:!1,slidesPerView:d(768)},1024:{spaceBetween:16,freeMode:!1,slidesPerView:d(1024)},1440:{spaceBetween:16,freeMode:!1,slidesPerView:d(1440)}}})]}),t(q,{visible:N,youTubeId:I,onCloseModal:()=>b(!1),videoUrl:u&&C||g}),t(Y,{textVisible:G,extension:$?.extension,onCloseModal:()=>{v(!1),x(null)}})]})});T.displayName="Graphic";var se=H(T);export{se as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/Graphic/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/Graphic/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full cursor-pointer overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["'use client'\nimport { useMediaQuery } from 'react-responsive'\nimport React, { useEffect, useImperativeHandle, useRef, useState } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Button, Heading, Picture, Text } from '../../components/index.js'\nimport Title from '../Title/index.js'\nimport { VideoModal } from '../VideoModal/index.js'\nimport { TextModal } from '../TextModal/index.js'\nimport type { ComponentCommonProps, Video, Img, Theme } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\nimport type { Media } from '../../types/props.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n href?: string\n video?: Video\n mobileVideo?: Video\n youtubeId?: string\n isYouTube?: boolean\n isShowIcon?: boolean\n buttonText?: string\n icon?: Img\n theme?: Theme\n extension?: {\n text: string\n textDesc: string\n textTitle: string\n textPcImg: Img\n textMobileImg: Img\n }\n // textPcImg?: Img\n // textMobileImg?: Img\n // text?: string\n // textDesc?: string\n // textTitle?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n itemTheme?: Theme\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const ref = useRef<HTMLDivElement>(null)\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-w-[704] tablet:aspect-h-[400] laptop:aspect-w-[896] laptop:aspect-h-[384] desktop:aspect-w-[1312] desktop:aspect-h-[512] lg-desktop:aspect-w-[1664] lg-desktop:aspect-h-[640]'\n case 2:\n return 'tablet:aspect-w-[346] tablet:aspect-h-[360] laptop:aspect-w-[440] laptop:aspect-h-[360] desktop:aspect-w-[648] desktop:aspect-h-[384] lg-desktop:aspect-w-[824] lg-desktop:aspect-h-[480]'\n case 3:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[427] desktop:aspect-h-[384] lg-desktop:aspect-w-[544] lg-desktop:aspect-h-[480]'\n default:\n return 'tablet:aspect-w-[296] tablet:aspect-h-[360] laptop:aspect-w-[288] laptop:aspect-h-[360] desktop:aspect-w-[316] desktop:aspect-h-[384] lg-desktop:aspect-w-[404] lg-desktop:aspect-h-[480]'\n }\n }\n\n useExposure(ref, {\n componentType,\n componentName,\n componentTitle: data?.title,\n componentDescription: data?.description,\n position: configuration?.index + 1,\n })\n\n return (\n <div\n ref={ref}\n className={cn(\n handleAspect(),\n 'graphicItem',\n 'laptop:h-auto text-info-primary md-tablet:h-[360px] flex-1 shrink-0 md:basis-[296px]',\n {\n 'aiui-dark': data.theme === 'dark',\n }\n )}\n >\n <div\n className={cn('absolute inset-0', {\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <div className=\"relative block size-full cursor-pointer overflow-hidden\">\n {data?.href ? (\n <a\n aria-label={data?.title ?? data?.description}\n href={trackUrlRef(data?.href || '', `${componentType}_${componentName}`)}\n className=\"block size-full cursor-pointer overflow-hidden\"\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}`}\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </a>\n ) : (\n <div className=\"block size-full cursor-pointer overflow-hidden\">\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover tablet:hover:scale-110 transition-all duration-300\"\n source={data?.imgUrl?.url}\n alt={data?.imgUrl?.alt || ''}\n />\n </div>\n )}\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] box-border flex w-full flex-col p-4\">\n <div className={cn('flex items-end overflow-hidden', 'graphic-bottom')}>\n <div className=\"flex-1 overflow-hidden\">\n <Text\n html={data?.title}\n style={{ color: data?.textColor }}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"graphic-title line-clamp-3 lg-desktop:text-lg desktop:text-base text-sm font-bold leading-[1.2]\"\n />\n {data?.description && (\n <Heading\n html={data?.description}\n style={{\n color: data?.textColor,\n }}\n as=\"h3\"\n className=\"graphic-description lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 line-clamp-3 flex-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n {!data?.isShowIcon && (data?.video?.url || data?.youtubeId) && (\n <button\n aria-label=\"Play Video\"\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onVideoPlayBtnClick?.(configuration?.index || 0, data)\n }}\n className=\"laptop:size-12 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75\"\n >\n <svg width=\"12\" height=\"14\" viewBox=\"0 0 12 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M12 7L0 14L0 0L12 7Z\" fill=\"white\" />\n </svg>\n </button>\n )}\n {data?.isShowIcon && data?.icon?.url && (\n <button\n onClick={(e: any) => {\n e.preventDefault()\n e.stopPropagation()\n configuration?.onIconClick?.(data, configuration)\n }}\n className=\"laptop:size-9 flex size-8 items-center justify-center rounded-full bg-white bg-opacity-20 hover:bg-black/75 overflow-hidden\"\n >\n <Picture\n className=\"h-full\"\n imgClassName=\"h-full object-cover\"\n source={data?.icon?.url}\n alt={data?.icon?.alt || ''}\n />\n </button>\n )}\n </div>\n {data.buttonText && (\n <Button\n as=\"a\"\n aria-label={data?.title ?? data?.description}\n variant=\"secondary\"\n className=\"mt-[8px] self-start\"\n href={trackUrlRef(data?.href, `${componentType}_${componentName}`)}\n data-headless-nav-postion={`''#${configuration?.index + 1}`}\n data-headless-type-name={`${componentType}#${componentName}`}\n data-headless-title-desc-button={`${data?.title}#${data?.description}#${data?.buttonText}`}\n >\n {data.buttonText}\n </Button>\n )}\n </div>\n </div>\n </div>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className }, ref) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n const innerRef = useRef<HTMLDivElement>(null)\n const [visible, setVisible] = useState<boolean>(false)\n const [videoUrl, setVideoUrl] = useState<string>('')\n const [youTubeId, setYouTubeId] = useState<string>('')\n const [mobileVideoUrl, setMobileVideoUrl] = useState<string>('')\n const [currentItem, setCurrentItem] = useState<GraphicType | null>(null)\n const [textVisible, setTextVisible] = useState<boolean>(false)\n\n const handleSwiperShow = (width?: number) => {\n const isShow = (data?.items as GraphicType[])?.length > 3\n const isMobile = (data?.items as GraphicType[])?.length > 2\n\n switch (width) {\n case 1440:\n return isShow ? 4 : data?.items?.length\n case 1024:\n return isShow ? 3 : data?.items?.length\n case 768:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return isShow ? 2.3 : isMobile ? 2.3 : 2\n default:\n if ((data?.items as GraphicType[])?.length === 1) return 1 // \u2705 \u65B0\u589E\uFF1A\u53EA\u6709\u4E00\u4E2A item \u65F6\uFF0C\u5C55\u793A 1 \u4E2A\n return 1.2\n }\n }\n\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n\n useExposure(innerRef, {\n componentType,\n componentName,\n componentTitle: data?.title,\n })\n\n useEffect(() => {\n const descriptions = innerRef.current?.querySelectorAll<HTMLDivElement>('.graphic-description')\n if (descriptions && descriptions.length > 0) {\n let maxHeight = 0\n descriptions.forEach((el: HTMLDivElement) => {\n maxHeight = Math.max(maxHeight, el.offsetHeight)\n })\n descriptions.forEach((el: HTMLDivElement) => {\n el.style.height = `${maxHeight}px`\n })\n }\n }, [])\n\n return (\n <div className={cn('graphicBlock', className)} ref={innerRef}>\n <div className=\"graphic-box\">\n {data?.title && <Title data={{ title: data?.title }} />}\n <SwiperBox\n id=\"Graphic\"\n className={cn('!overflow-visible')}\n data={{\n list: data?.items || [],\n configuration: {\n itemShape: data.itemShape,\n num: data?.items?.length || 0,\n onVideoPlayBtnClick: (_: number, data: GraphicType) => {\n setVisible(true)\n if (data?.isYouTube) {\n setYouTubeId?.(data?.youtubeId || '')\n } else {\n setVideoUrl?.(data?.video?.url || '')\n setMobileVideoUrl?.(data?.mobileVideo?.url || '')\n }\n },\n onIconClick: (data: GraphicType) => {\n setTextVisible(true)\n setCurrentItem(data)\n },\n title: data?.title,\n },\n }}\n Slide={Item}\n breakpoints={{\n 0: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: 1,\n },\n 374: {\n spaceBetween: 12,\n freeMode: false,\n slidesPerView: handleSwiperShow(),\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(768),\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1024),\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: handleSwiperShow(1440),\n },\n }}\n />\n </div>\n <VideoModal\n visible={visible}\n youTubeId={youTubeId}\n onCloseModal={() => setVisible(false)}\n videoUrl={isMobile ? mobileVideoUrl || videoUrl : videoUrl}\n />\n <TextModal\n textVisible={textVisible}\n extension={currentItem?.extension}\n onCloseModal={() => {\n setTextVisible(false)\n setCurrentItem(null)\n }}\n />\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withLayout(Graphic)\n"],
5
+ "mappings": "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",
6
6
  "names": ["jsx", "jsxs", "useMediaQuery", "React", "useEffect", "useImperativeHandle", "useRef", "useState", "cn", "withLayout", "SwiperBox", "Button", "Heading", "Picture", "Text", "Title", "VideoModal", "TextModal", "useExposure", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "ref", "handleAspect", "e", "Graphic", "className", "isMobile", "innerRef", "visible", "setVisible", "videoUrl", "setVideoUrl", "youTubeId", "setYouTubeId", "mobileVideoUrl", "setMobileVideoUrl", "currentItem", "setCurrentItem", "textVisible", "setTextVisible", "handleSwiperShow", "width", "isShow", "descriptions", "maxHeight", "el", "_", "Graphic_default"]
7
7
  }
package/dist/esm/biz-components/GraphicMore/index.js CHANGED
@@ -1,2 +1,2 @@
1
- "use client";import{Fragment as h,jsx as t,jsxs as o}from"react/jsx-runtime";import{cn as l}from"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as c}from"../../shared/Styles.js";import{Grid as f,GridItem as x}from"../../components/gird.js";import{Picture as i,Text as a}from"../../components/index.js";const u=p=>{const{data:m,className:n}=p,{productsTab:d,shape:s}=m;return o(h,{children:[t("div",{className:l("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:t(f,{className:l("tablet:gap-4 grid grid-cols-12 gap-3 ",n),children:d?.map((e,r)=>o(x,{span:e.span,className:l("text-info-primary relative w-full overflow-hidden",s==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":e.theme==="dark"}),children:[t(i,{source:e.img.url,className:"size-full",imgClassName:""}),o("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"line-clamp-2 desktop:text-[32px] laptop:text-2xl text-xl font-bold"}),e.description&&t(a,{html:e.description,className:"line-clamp-2 desktop:text-lg text-sm font-bold"})]})]},r))})}),t("div",{className:"tablet:hidden block text-[#1D1D1F]",children:t("div",{className:" flex gap-[12px] flex-wrap",children:d?.map((e,r)=>o("div",{className:l("text-info-primary relative overflow-hidden",s==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":e.theme==="dark"},e?.fullWidth==="true"?"w-full flex-none":" w-[173px]"),children:[t(i,{source:e.mobileImg.url,className:"size-full",imgClassName:"h-full object-cover"}),o("div",{className:"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"text-xl font-bold leading-[1.2]"}),e.description&&t(a,{html:e.description,className:"text-xl font-bold"})]})]},r))})})]})};var w=c(u);export{w as default};
1
+ "use client";import{Fragment as h,jsx as t,jsxs as l}from"react/jsx-runtime";import{cn as o}from"../../helpers/utils.js";import"../SwiperBox/index.js";import{withLayout as n}from"../../shared/Styles.js";import{Grid as f,GridItem as x}from"../../components/gird.js";import{Picture as i,Text as a}from"../../components/index.js";const u=p=>{const{data:m,className:c}=p,{productsTab:d,shape:s}=m;return l(h,{children:[t("div",{className:o("creativeModuleBlock","tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]"),children:t(f,{className:o("tablet:gap-4 grid grid-cols-12 gap-3 ",c),children:d?.map((e,r)=>l(x,{span:e.span,className:o("text-info-primary relative w-full overflow-hidden",s==="rounded"?"rounded-2xl":"rounded-none","",{"aiui-dark":e.theme==="dark"}),children:[t(i,{source:e.img.url,className:"size-full",imgClassName:""}),l("div",{className:"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"line-clamp-2 desktop:text-[32px] laptop:text-2xl text-xl font-bold"}),e.description&&t(a,{html:e.description,className:"line-clamp-2 desktop:text-lg text-sm font-bold"})]})]},r))})}),t("div",{className:"tablet:hidden block text-[#1D1D1F]",children:t("div",{className:" flex gap-[12px] flex-wrap",children:d?.map((e,r)=>l("div",{className:o("text-info-primary relative overflow-hidden",s==="rounded"?"rounded-xl":"rounded-none",{"aiui-dark":e.theme==="dark"},e?.fullWidth==="true"?"w-full flex-none":" w-[calc(50%-6px)]"),children:[t(i,{source:e.mobileImg.url,className:"size-full",imgClassName:"h-full object-cover"}),l("div",{className:"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden",children:[e.title&&t(a,{html:e.title,as:"p",className:"text-xl font-bold leading-[1.2]"}),e.description&&t(a,{html:e.description,className:"text-xl font-bold"})]})]},r))})})]})};var w=n(u);export{w as default};
2
2
  //# sourceMappingURL=index.js.map
package/dist/esm/biz-components/GraphicMore/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/GraphicMore/index.tsx"],
4
- "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type GraphicMoreDataType = {\n img: Img\n mobileImg: Img\n title: string\n description: string\n theme: 'light' | 'dark'\n fullWidth: 'true' | 'false'\n span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype GraphicMoreType = {\n data: {\n shape?: 'rounded' | 'square'\n productsTab: GraphicMoreDataType[]\n }\n className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n const { data, className } = props\n const { productsTab, shape } = data\n\n return (\n <>\n <div className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}>\n <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n {productsTab?.map((item, index) => {\n return (\n <GridItem\n key={index}\n span={item.span}\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n '',\n {\n 'aiui-dark': item.theme === 'dark',\n }\n )}\n >\n <Picture source={item.img.url} className=\"size-full\" imgClassName=\"\" />\n <div className=\"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n {item.title && (\n <Text\n html={item.title}\n as=\"p\"\n className=\"line-clamp-2 desktop:text-[32px] laptop:text-2xl text-xl font-bold\"\n />\n )}\n {item.description && (\n <Text html={item.description} className=\"line-clamp-2 desktop:text-lg text-sm font-bold\" />\n )}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n </div>\n <div className='tablet:hidden block text-[#1D1D1F]'>\n <div className=\" flex gap-[12px] flex-wrap\">\n {productsTab?.map((it, ind) => {\n return (\n <div\n key={ind}\n className={cn(\n 'text-info-primary relative overflow-hidden',\n shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n { 'aiui-dark': it.theme === 'dark' },\n it?.fullWidth === 'true' \n ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n : ' w-[173px]' // \u666E\u901A\u5143\u7D20\n )}\n >\n <Picture source={it.mobileImg.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n <div className=\"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n {it.title && <Text html={it.title} as=\"p\" className=\"text-xl font-bold leading-[1.2]\" />}\n {it.description && <Text html={it.description} className=\"text-xl font-bold\" />}\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </>\n )\n}\n\nexport default withLayout(GraphicMore)\n"],
5
- "mappings": "aA+BI,mBAAAA,EAiBY,OAAAC,EACA,QAAAC,MAlBZ,oBA9BJ,OAAS,MAAAC,MAAU,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAoB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,OACET,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAWE,EAAG,sBAAuB,sEAAsE,EAC9G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCS,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,GAAG,EACrEb,EAAC,OAAI,UAAU,oJACZ,UAAAa,EAAK,OACJd,EAACO,EAAA,CACC,KAAMO,EAAK,MACX,GAAG,IACH,UAAU,qEACZ,EAEDA,EAAK,aACJd,EAACO,EAAA,CAAK,KAAMO,EAAK,YAAa,UAAU,iDAAiD,GAE7F,IAvBKC,CAwBP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACd,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,EAAG,QAAU,MAAO,EACnCA,GAAI,YAAc,OACd,mBACA,YACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,EAAG,UAAU,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC5Ff,EAAC,OAAI,UAAU,2FACZ,UAAAe,EAAG,OAAShB,EAACO,EAAA,CAAK,KAAMS,EAAG,MAAO,GAAG,IAAI,UAAU,kCAAkC,EACrFA,EAAG,aAAehB,EAACO,EAAA,CAAK,KAAMS,EAAG,YAAa,UAAU,oBAAoB,GAC/E,IAdKC,CAeP,CAEH,EACD,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
4
+ "sourcesContent": ["'use client'\nimport { cn } from '../../helpers/utils.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport type { Img } from '../../types/props.js'\nimport { withLayout } from '../../shared/Styles.js'\nimport { Grid, GridItem } from '../../components/gird.js'\nimport { Picture, Text } from '../../components/index.js'\n\nexport type GraphicMoreDataType = {\n img: Img\n mobileImg: Img\n title: string\n description: string\n theme: 'light' | 'dark'\n fullWidth: 'true' | 'false'\n span: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12\n}\n\ntype GraphicMoreType = {\n data: {\n shape?: 'rounded' | 'square'\n productsTab: GraphicMoreDataType[]\n }\n className?: string\n}\n\nconst GraphicMore = (props: GraphicMoreType) => {\n const { data, className } = props\n const { productsTab, shape } = data\n\n return (\n <>\n <div className={cn('creativeModuleBlock', 'tablet:block box-border hidden w-full overflow-hidden text-[#1D1D1F]')}>\n <Grid className={cn('tablet:gap-4 grid grid-cols-12 gap-3 ', className)}>\n {productsTab?.map((item, index) => {\n return (\n <GridItem\n key={index}\n span={item.span}\n className={cn(\n 'text-info-primary relative w-full overflow-hidden',\n shape === 'rounded' ? 'rounded-2xl' : 'rounded-none',\n '',\n {\n 'aiui-dark': item.theme === 'dark',\n }\n )}\n >\n <Picture source={item.img.url} className=\"size-full\" imgClassName=\"\" />\n <div className=\"footBottom lg-desktop:top-8 lg-desktop:px-8 desktop:top-6 desktop:px-6 absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n {item.title && (\n <Text\n html={item.title}\n as=\"p\"\n className=\"line-clamp-2 desktop:text-[32px] laptop:text-2xl text-xl font-bold\"\n />\n )}\n {item.description && (\n <Text html={item.description} className=\"line-clamp-2 desktop:text-lg text-sm font-bold\" />\n )}\n </div>\n </GridItem>\n )\n })}\n </Grid>\n </div>\n <div className='tablet:hidden block text-[#1D1D1F]'>\n <div className=\" flex gap-[12px] flex-wrap\">\n {productsTab?.map((it, ind) => {\n return (\n <div\n key={ind}\n className={cn(\n 'text-info-primary relative overflow-hidden',\n shape === 'rounded' ? 'rounded-xl' : 'rounded-none',\n { 'aiui-dark': it.theme === 'dark' },\n it?.fullWidth === 'true' \n ? 'w-full flex-none' // \u5360\u6EE1\u6574\u884C\n : ' w-[calc(50%-6px)]' // \u666E\u901A\u5143\u7D20\n )}\n >\n <Picture source={it.mobileImg.url} className=\"size-full\" imgClassName=\"h-full object-cover\" />\n <div className=\"footBottomMob absolute top-4 px-4 flex flex-col gap-[6px] left-0 right-0 overflow-hidden\">\n {it.title && <Text html={it.title} as=\"p\" className=\"text-xl font-bold leading-[1.2]\" />}\n {it.description && <Text html={it.description} className=\"text-xl font-bold\" />}\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </>\n )\n}\n\nexport default withLayout(GraphicMore)\n"],
5
+ "mappings": "aA+BI,mBAAAA,EAiBY,OAAAC,EACA,QAAAC,MAlBZ,oBA9BJ,OAAS,MAAAC,MAAU,yBACnB,MAAsB,wBAEtB,OAAS,cAAAC,MAAkB,yBAC3B,OAAS,QAAAC,EAAM,YAAAC,MAAgB,2BAC/B,OAAS,WAAAC,EAAS,QAAAC,MAAY,4BAoB9B,MAAMC,EAAeC,GAA2B,CAC9C,KAAM,CAAE,KAAAC,EAAM,UAAAC,CAAU,EAAIF,EACtB,CAAE,YAAAG,EAAa,MAAAC,CAAM,EAAIH,EAE/B,OACET,EAAAF,EAAA,CACE,UAAAC,EAAC,OAAI,UAAWE,EAAG,sBAAuB,sEAAsE,EAC9G,SAAAF,EAACI,EAAA,CAAK,UAAWF,EAAG,wCAAyCS,CAAS,EACnE,SAAAC,GAAa,IAAI,CAACE,EAAMC,IAErBd,EAACI,EAAA,CAEC,KAAMS,EAAK,KACX,UAAWZ,EACT,oDACAW,IAAU,UAAY,cAAgB,eACtC,GACA,CACE,YAAaC,EAAK,QAAU,MAC9B,CACF,EAEA,UAAAd,EAACM,EAAA,CAAQ,OAAQQ,EAAK,IAAI,IAAK,UAAU,YAAY,aAAa,GAAG,EACrEb,EAAC,OAAI,UAAU,oJACZ,UAAAa,EAAK,OACJd,EAACO,EAAA,CACC,KAAMO,EAAK,MACX,GAAG,IACH,UAAU,qEACZ,EAEDA,EAAK,aACJd,EAACO,EAAA,CAAK,KAAMO,EAAK,YAAa,UAAU,iDAAiD,GAE7F,IAvBKC,CAwBP,CAEH,EACH,EACF,EACAf,EAAC,OAAI,UAAU,qCACb,SAAAA,EAAC,OAAI,UAAU,6BACd,SAAAY,GAAa,IAAI,CAACI,EAAIC,IAEnBhB,EAAC,OAEC,UAAWC,EACT,6CACAW,IAAU,UAAY,aAAe,eACrC,CAAE,YAAaG,EAAG,QAAU,MAAO,EACnCA,GAAI,YAAc,OACd,mBACA,oBACN,EAEA,UAAAhB,EAACM,EAAA,CAAQ,OAAQU,EAAG,UAAU,IAAK,UAAU,YAAY,aAAa,sBAAsB,EAC5Ff,EAAC,OAAI,UAAU,2FACZ,UAAAe,EAAG,OAAShB,EAACO,EAAA,CAAK,KAAMS,EAAG,MAAO,GAAG,IAAI,UAAU,kCAAkC,EACrFA,EAAG,aAAehB,EAACO,EAAA,CAAK,KAAMS,EAAG,YAAa,UAAU,oBAAoB,GAC/E,IAdKC,CAeP,CAEH,EACD,EACF,GACF,CAEJ,EAEA,IAAOC,EAAQf,EAAWK,CAAW",
6
6
  "names": ["Fragment", "jsx", "jsxs", "cn", "withLayout", "Grid", "GridItem", "Picture", "Text", "GraphicMore", "props", "data", "className", "productsTab", "shape", "item", "index", "it", "ind", "GraphicMore_default"]
7
7
  }