@anker-in/headless-ui 0.0.27-alpha.148 → 0.0.27-alpha.149
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/biz-components/Graphic/index.js +1 -1
- package/dist/cjs/biz-components/Graphic/index.js.map +2 -2
- package/dist/esm/biz-components/Graphic/index.js +1 -1
- package/dist/esm/biz-components/Graphic/index.js.map +2 -2
- package/dist/tokens/anker.css +0 -13
- package/dist/tokens/base.css +0 -1
- package/dist/tokens/eufy.css +0 -3
- package/dist/tokens/solix.css +2 -2
- package/dist/tokens/soundcore.css +0 -5
- package/package.json +2 -1
- package/style.css +0 -3
- package/tailwind.config.js +1 -0
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var M=Object.create;var l=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of S(t))!A.call(e,i)&&i!==o&&l(e,i,{get:()=>t[i],enumerable:!(p=G(t,i))||p.enumerable});return e};var c=(e,t,o)=>(o=e!=null?M(B(e)):{},d(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),R=e=>d(l({},"__esModule",{value:!0}),e);var E={};H(E,{default:()=>D});module.exports=R(E);var s=require("react/jsx-runtime"),r=c(require("react")),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),g=c(require("../SwiperBox/index.js")),v=require("../../components/index.js"),a=require("../../components/index.js"),w=require("../../components/container.js"),k=c(require("../Title/index.js")),b=require("react-responsive"),y=require("../../hooks/useExposure.js"),N=require("../AiuiProvider/index.js"),P=require("../../shared/trackUrlRef.js");const f="image",u="graphic",V=({data:e,configuration:t})=>{const o=(0,b.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,m.cn)((()=>{switch(t.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":o,"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.link,`${f}_${u}`),className:"relative cursor-pointer",children:[(0,s.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,s.jsx)(a.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,s.jsx)(v.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},h=r.default.forwardRef(({data:e,className:t,...o},p)=>{const i=e?.items?.length>2,n=(0,r.useRef)(null);(0,r.useImperativeHandle)(p,()=>n.current);const{trackingData:C}=(0,N.useAiuiContext)(),{profileActivated:T}=C;return(0,y.useExposure)(n,{componentType:f,componentName:u,memberActiveStatus:T?"active":"not active",componentTitle:e?.title}),(0,s.jsx)("div",{className:t,ref:n,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(w.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(k.default,{data:{title:e?.title}}),(0,s.jsx)(g.default,{id:"Graphic",className:(0,m.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:i?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:i?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:i?4:2}}})]})})})});h.displayName="Graphic";var D=(0,x.withStyles)(h);
|
|
1
|
+
"use strict";"use client";var M=Object.create;var l=Object.defineProperty;var G=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var o in t)l(e,o,{get:t[o],enumerable:!0})},d=(e,t,o,p)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of S(t))!A.call(e,i)&&i!==o&&l(e,i,{get:()=>t[i],enumerable:!(p=G(t,i))||p.enumerable});return e};var c=(e,t,o)=>(o=e!=null?M(B(e)):{},d(t||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),R=e=>d(l({},"__esModule",{value:!0}),e);var E={};H(E,{default:()=>D});module.exports=R(E);var s=require("react/jsx-runtime"),r=c(require("react")),m=require("../../helpers/utils.js"),x=require("../../shared/Styles.js"),g=c(require("../SwiperBox/index.js")),v=require("../../components/index.js"),a=require("../../components/index.js"),w=require("../../components/container.js"),k=c(require("../Title/index.js")),b=require("react-responsive"),y=require("../../hooks/useExposure.js"),N=require("../AiuiProvider/index.js"),P=require("../../shared/trackUrlRef.js");const f="image",u="graphic",V=({data:e,configuration:t})=>{const o=(0,b.useMediaQuery)({query:"(max-width: 768px)"});return(0,s.jsx)("div",{className:(0,m.cn)((()=>{switch(t.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":o,"rounded-xl overflow-hidden laptop:rounded-2xl":t?.itemShape==="round"}),children:(0,s.jsxs)("a",{href:(0,P.trackUrlRef)(e?.link,`${f}_${u}`),className:"relative block size-full cursor-pointer",children:[(0,s.jsx)(a.Picture,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),(0,s.jsxs)("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[(0,s.jsx)(a.Text,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&(0,s.jsx)(v.Heading,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},h=r.default.forwardRef(({data:e,className:t,...o},p)=>{const i=e?.items?.length>2,n=(0,r.useRef)(null);(0,r.useImperativeHandle)(p,()=>n.current);const{trackingData:C}=(0,N.useAiuiContext)(),{profileActivated:T}=C;return(0,y.useExposure)(n,{componentType:f,componentName:u,memberActiveStatus:T?"active":"not active",componentTitle:e?.title}),(0,s.jsx)("div",{className:t,ref:n,children:(0,s.jsx)("div",{className:"graphic-box",children:(0,s.jsxs)(w.Container,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&(0,s.jsx)(k.default,{data:{title:e?.title}}),(0,s.jsx)(g.default,{id:"Graphic",className:(0,m.cn)("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:V,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:i?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:i?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:i?4:2}}})]})})})});h.displayName="Graphic";var D=(0,x.withStyles)(h);
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\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 />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold 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=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\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 },\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: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GA8DQ,IAAAI,EAAA,6BA7DRC,EAAmD,oBACnDC,EAAmB,kCACnBC,EAA2B,kCAC3BC,EAAsB,oCACtBC,EAAwB,qCACxBA,EAA8B,qCAC9BC,EAA0B,yCAC1BC,EAAkB,gCAClBC,EAA8B,4BAE9BC,EAA4B,sCAC5BC,EAA+B,oCAC/BC,EAA4B,uCAE5B,MAAMC,EAAgB,QAChBC,EAAgB,UAmBhBC,EAAO,CAAC,CAAE,KAAAC,EAAM,cAAAC,CAAc,IAAkD,CACpF,MAAMC,KAAW,iBAAc,CAAE,MAAO,oBAAqB,CAAC,EAe9D,SACE,OAAC,OACC,aAAW,OAfM,IAAM,CACzB,OAAQD,EAAc,IAAK,CACzB,IAAK,GACH,MAAO,yGACT,IAAK,GACH,MAAO,uGACT,IAAK,GACH,MAAO,uGACT,QACE,MAAO,sGACX,CACF,GAI+B,EAAG,mCAAoC,CAChE,YAAaC,EACZ,gDAAkDD,GAAe,YAAc,OAClF,CAAC,EAED,oBAAC,KACC,QAAM,eAAYD,GAAM,KAAM,GAAGH,CAAa,IAAIC,CAAa,EAAE,EACjE,UAAU,0CAEV,oBAAC,WACC,UAAU,SACV,aAAa,yEACb,OAAQE,GAAM,QAAQ,IACxB,KACA,QAAC,OAAI,UAAU,8DACb,oBAAC,QACC,MAAO,CACL,MAAOA,GAAM,SACf,EACA,KAAMA,GAAM,MAEZ,UAAU,2EACZ,EACCA,GAAM,gBACL,OAAC,WACC,KAAMA,GAAM,YACZ,MAAO,CACL,MAAOA,GAAM,SACf,EACA,GAAG,KACH,UAAU,gHACZ,GAEJ,GACF,EACF,CAEJ,EAEMG,EAAU,EAAAC,QAAM,WAAyC,CAAC,CAAE,KAAAJ,EAAM,UAAAK,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACrG,MAAMC,EAAUR,GAAM,OAAyB,OAAS,EAClDS,KAAW,UAAuB,IAAI,KAC5C,uBAAoBF,EAAK,IAAME,EAAS,OAAyB,EACjE,KAAM,CAAE,aAAAC,CAAa,KAAI,kBAAe,EAClC,CAAE,iBAAAC,CAAiB,EAAID,EAE7B,wBAAYD,EAAU,CACpB,cAAAZ,EACA,cAAAC,EACA,mBAAoBa,EAAmB,SAAW,aAClD,eAAgBX,GAAM,KACxB,CAAC,KAGC,OAAC,OAAI,UAAWK,EAAW,IAAKI,EAC9B,mBAAC,OAAI,UAAU,cACb,oBAAC,aAAW,GAAIT,GAAM,gBAAkB,CAAC,EAAI,UAAU,kBACpD,UAAAA,GAAM,UAAS,OAAC,EAAAY,QAAA,CAAM,KAAM,CAAE,MAAOZ,GAAM,KAAM,EAAG,KACrD,OAAC,EAAAa,QAAA,CACC,GAAG,UACH,aAAW,MAAG,mBAAmB,EACjC,KAAM,CACJ,KAAMb,GAAM,OAAS,CAAC,EACtB,cAAe,CACb,UAAWA,EAAK,UAChB,IAAKA,GAAM,OAAO,QAAU,CAC9B,CACF,EACA,MAAOD,EACP,YAAa,CACX,EAAG,CACD,aAAc,GACd,SAAU,GACV,cAAe,CACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAe,GACjB,EACA,IAAK,CACH,aAAc,GACd,SAAU,GACV,cAAeS,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,IAAM,CAChC,EACA,KAAM,CACJ,aAAc,GACd,SAAU,GACV,cAAeA,EAAS,EAAI,CAC9B,CACF,EACF,GACF,EACF,EACF,CAEJ,CAAC,EAEDL,EAAQ,YAAc,UAEtB,IAAOpB,KAAQ,cAAWoB,CAAO",
|
|
6
6
|
"names": ["Graphic_exports", "__export", "Graphic_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_Styles", "import_SwiperBox", "import_components", "import_container", "import_Title", "import_react_responsive", "import_useExposure", "import_AiuiProvider", "import_trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "React", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Title", "SwiperBox"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import u,{useImperativeHandle as h,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import v from"../SwiperBox/index.js";import{Heading as w}from"../../components/index.js";import{Picture as k,Text as b}from"../../components/index.js";import{Container as y}from"../../components/container.js";import N from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const n="image",c="graphic",G=({data:e,configuration:s})=>{const p=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":p,"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("a",{href:M(e?.link,`${n}_${c}`),className:"relative cursor-pointer",children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(b,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(w,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},m=u.forwardRef(({data:e,className:s,...p},l)=>{const o=e?.items?.length>2,i=x(null);h(l,()=>i.current);const{trackingData:d}=T(),{profileActivated:f}=d;return C(i,{componentType:n,componentName:c,memberActiveStatus:f?"active":"not active",componentTitle:e?.title}),t("div",{className:s,ref:i,children:t("div",{className:"graphic-box",children:r(y,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(N,{data:{title:e?.title}}),t(v,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});m.displayName="Graphic";var
|
|
1
|
+
"use client";import{jsx as t,jsxs as r}from"react/jsx-runtime";import u,{useImperativeHandle as h,useRef as x}from"react";import{cn as a}from"../../helpers/utils.js";import{withStyles as g}from"../../shared/Styles.js";import v from"../SwiperBox/index.js";import{Heading as w}from"../../components/index.js";import{Picture as k,Text as b}from"../../components/index.js";import{Container as y}from"../../components/container.js";import N from"../Title/index.js";import{useMediaQuery as P}from"react-responsive";import{useExposure as C}from"../../hooks/useExposure.js";import{useAiuiContext as T}from"../AiuiProvider/index.js";import{trackUrlRef as M}from"../../shared/trackUrlRef.js";const n="image",c="graphic",G=({data:e,configuration:s})=>{const p=P({query:"(max-width: 768px)"});return t("div",{className:a((()=>{switch(s.num){case 1:return"tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]";case 2:return"lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]";case 3:return"tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]";default:return"lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]"}})(),"flex-1 shrink-0 md:basis-[296px]",{"h-[360px]":p,"rounded-xl overflow-hidden laptop:rounded-2xl":s?.itemShape==="round"}),children:r("a",{href:M(e?.link,`${n}_${c}`),className:"relative block size-full cursor-pointer",children:[t(k,{className:"h-full",imgClassName:"h-full object-cover tablet:hover:scale-110 transition-all duration-300",source:e?.imgUrl?.url}),r("div",{className:"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4",children:[t(b,{style:{color:e?.textColor},html:e?.title,className:"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold leading-[1.2]"}),e?.description&&t(w,{html:e?.description,style:{color:e?.textColor},as:"h3",className:"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]"})]})]})})},m=u.forwardRef(({data:e,className:s,...p},l)=>{const o=e?.items?.length>2,i=x(null);h(l,()=>i.current);const{trackingData:d}=T(),{profileActivated:f}=d;return C(i,{componentType:n,componentName:c,memberActiveStatus:f?"active":"not active",componentTitle:e?.title}),t("div",{className:s,ref:i,children:t("div",{className:"graphic-box",children:r(y,{...e?.containerProps||{},className:"overflow-hidden",children:[e?.title&&t(N,{data:{title:e?.title}}),t(v,{id:"Graphic",className:a("!overflow-visible"),data:{list:e?.items||[],configuration:{itemShape:e.itemShape,num:e?.items?.length||0}},Slide:G,breakpoints:{0:{spaceBetween:12,freeMode:!1,slidesPerView:1},374:{spaceBetween:12,freeMode:!1,slidesPerView:1.1},768:{spaceBetween:16,freeMode:!1,slidesPerView:o?2.3:2},1024:{spaceBetween:16,freeMode:!1,slidesPerView:o?3.1:2},1440:{spaceBetween:16,freeMode:!1,slidesPerView:o?4:2}}})]})})})});m.displayName="Graphic";var z=g(m);export{z as default};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/Graphic/index.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\nimport React, { useImperativeHandle, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport { withStyles } from '../../shared/Styles.js'\nimport SwiperBox from '../SwiperBox/index.js'\nimport { Heading } from '../../components/index.js'\nimport { Picture, Text } from '../../components/index.js'\nimport { Container } from '../../components/container.js'\nimport Title from '../Title/index.js'\nimport { useMediaQuery } from 'react-responsive'\nimport type { ComponentCommonProps, ContainerProps, Img } from '../../types/props.js'\nimport { useExposure } from '../../hooks/useExposure.js'\nimport { useAiuiContext } from '../AiuiProvider/index.js'\nimport { trackUrlRef } from '../../shared/trackUrlRef.js'\n\nconst componentType = 'image'\nconst componentName = 'graphic'\n\ntype GraphicType = {\n imgUrl: Img\n title: string\n description?: string\n textColor?: string\n link?: string\n}\nexport interface GraphicProps extends ComponentCommonProps {\n className?: string\n data: {\n title?: string\n items?: GraphicType[]\n itemShape?: 'round' | 'square'\n containerProps?: ContainerProps\n }\n}\n\nconst Item = ({ data, configuration }: { data: GraphicType; configuration?: any }) => {\n const isMobile = useMediaQuery({ query: '(max-width: 768px)' })\n\n const handleAspect = () => {\n switch (configuration.num) {\n case 1:\n return 'tablet:aspect-[704/400] laptop:aspect-[896/384] desktop:aspect-[1312/512] lg-desktop:aspect-[1664/640]'\n case 2:\n return 'lg-desktop:aspect-[824/480] desktop:aspect-[648/384] laptop:aspect-[440/360] tablet:aspect-[346/360]'\n case 3:\n return 'tablet:aspect-[296/400] laptop:aspect-[288/384] desktop:aspect-[427/512] lg-desktop:aspect-[544/640]'\n default:\n return 'lg-desktop:aspect-[404/480] desktop:aspect-[316/384] laptop:aspect-[288/360] tablet:aspect-[296/360]'\n }\n }\n\n return (\n <div\n className={cn(handleAspect(), 'flex-1 shrink-0 md:basis-[296px]', {\n 'h-[360px]': isMobile,\n ['rounded-xl overflow-hidden laptop:rounded-2xl']: configuration?.itemShape === 'round',\n })}\n >\n <a\n href={trackUrlRef(data?.link, `${componentType}_${componentName}`)}\n className=\"relative block size-full cursor-pointer\"\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 />\n <div className=\"laptop:p-6 absolute bottom-0 z-[1] flex w-full flex-col p-4\">\n <Text\n style={{\n color: data?.textColor,\n }}\n html={data?.title}\n // eslint-disable-next-line tailwindcss/classnames-order\n className=\"line-clamp-3 desktop:text-[18px] text-[14px] font-semibold 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=\"lg-desktop:text-[32px] desktop:mt-2 desktop:text-[24px] text-lines-2 mt-1 text-[24px] font-bold leading-[1.2]\"\n />\n )}\n </div>\n </a>\n </div>\n )\n}\n\nconst Graphic = React.forwardRef<HTMLDivElement, GraphicProps>(({ data, className, ...props }, ref) => {\n const isShow = (data?.items as GraphicType[])?.length > 2\n const innerRef = useRef<HTMLDivElement>(null)\n useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)\n const { trackingData } = useAiuiContext()\n const { profileActivated } = trackingData\n\n useExposure(innerRef, {\n componentType,\n componentName,\n memberActiveStatus: profileActivated ? 'active' : 'not active',\n componentTitle: data?.title,\n })\n\n return (\n <div className={className} ref={innerRef}>\n <div className=\"graphic-box\">\n <Container {...(data?.containerProps || {})} className=\"overflow-hidden\">\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 },\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: 1.1,\n },\n 768: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 2.3 : 2,\n },\n 1024: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 3.1 : 2,\n },\n 1440: {\n spaceBetween: 16,\n freeMode: false,\n slidesPerView: isShow ? 4 : 2,\n },\n }}\n />\n </Container>\n </div>\n </div>\n )\n})\n\nGraphic.displayName = 'Graphic'\n\nexport default withStyles(Graphic)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["jsx", "jsxs", "React", "useImperativeHandle", "useRef", "cn", "withStyles", "SwiperBox", "Heading", "Picture", "Text", "Container", "Title", "useMediaQuery", "useExposure", "useAiuiContext", "trackUrlRef", "componentType", "componentName", "Item", "data", "configuration", "isMobile", "Graphic", "className", "props", "ref", "isShow", "innerRef", "trackingData", "profileActivated", "Graphic_default"]
|
|
7
7
|
}
|
package/dist/tokens/anker.css
CHANGED
|
@@ -1,22 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--btn-bg-active-color: var(--brand-color-0);
|
|
3
|
-
--btn-bg-disabled-color: rgba(29, 62, 79, 0.7);
|
|
4
|
-
|
|
5
|
-
--btn-bg-secondary-color: transparent;
|
|
6
|
-
--btn-bg-secondary-active-color: #6e6e73;
|
|
7
|
-
--btn-bg-secondary-disabled-color: rgba(221, 221, 221, 0.7);
|
|
8
|
-
--btn-border-secondary-border-color: #acacac;
|
|
9
3
|
|
|
10
4
|
--btn-radius: 0;
|
|
11
|
-
|
|
12
5
|
--radius: 0em;
|
|
13
6
|
|
|
14
|
-
--letter-spacing-normal: -0.02em;
|
|
15
|
-
--line-height-tight: 1.2;
|
|
16
|
-
--line-height-normal: 1.4;
|
|
17
|
-
--line-height-loose: 1.6;
|
|
18
|
-
|
|
19
7
|
--brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
|
|
20
|
-
/* 通用组件库anker品牌颜色 */
|
|
21
8
|
--brand-color-0: #00befa;
|
|
22
9
|
}
|
package/dist/tokens/base.css
CHANGED
package/dist/tokens/eufy.css
CHANGED
|
@@ -4,9 +4,6 @@
|
|
|
4
4
|
--brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
|
|
5
5
|
|
|
6
6
|
|
|
7
|
-
--btn-bg-secondary-color: transparent;
|
|
8
|
-
--btn-bg-secondary-active-color: #555555;
|
|
9
|
-
--btn-bg-secondary-disabled-color: #f5f5f550;
|
|
10
7
|
|
|
11
8
|
--btn-radius: 24px;
|
|
12
9
|
|
package/dist/tokens/solix.css
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
:root {
|
|
2
2
|
--btn-bg-active-color: var(--brand-color-0);
|
|
3
|
-
|
|
3
|
+
--brand-gradient-color-0: linear-gradient(90deg, #2C7ED0 0%, #00A9E1 43%, #00DB84 100%);
|
|
4
|
+
|
|
4
5
|
--btn-radius: -0px;
|
|
5
6
|
--radius: 0em;
|
|
6
7
|
|
|
7
|
-
--brand-gradient-color-0: linear-gradient(90deg, #2C7ED0 0%, #00A9E1 43%, #00DB84 100%);
|
|
8
8
|
--brand-color-0: #00BEFA;
|
|
9
9
|
}
|
|
@@ -3,11 +3,6 @@
|
|
|
3
3
|
|
|
4
4
|
--brand-gradient-color-0: linear-gradient(90deg, var(--btn-bg-active-color) 0%, var(--btn-bg-active-color) 100%);
|
|
5
5
|
|
|
6
|
-
|
|
7
|
-
--btn-bg-secondary-color: transparent;
|
|
8
|
-
--btn-bg-secondary-active-color: #17bbef;
|
|
9
|
-
--btn-bg-secondary-disabled-color: #f5f5f550;
|
|
10
|
-
|
|
11
6
|
--btn-radius: 24px;
|
|
12
7
|
|
|
13
8
|
--radius: 0em;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@anker-in/headless-ui",
|
|
3
|
-
"version": "0.0.27-alpha.
|
|
3
|
+
"version": "0.0.27-alpha.149",
|
|
4
4
|
"type": "commonjs",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"types": "./dist/cjs/index.d.ts",
|
|
@@ -104,6 +104,7 @@
|
|
|
104
104
|
"@radix-ui/react-slot": "^1.2.2",
|
|
105
105
|
"@radix-ui/react-tabs": "^1.1.11",
|
|
106
106
|
"@radix-ui/react-visually-hidden": "^1.2.2",
|
|
107
|
+
"@tailwindcss/aspect-ratio": "^0.4.2",
|
|
107
108
|
"autoprefixer": "^10.4.19",
|
|
108
109
|
"class-variance-authority": "^0.7.0",
|
|
109
110
|
"clsx": "^2.1.1",
|
package/style.css
CHANGED