@anker-in/headless-ui 0.0.27-alpha.13 → 0.0.27-alpha.14

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.
@@ -1,2 +1,2 @@
1
- "use strict";var C=Object.create;var f=Object.defineProperty;var L=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var j=(e,r)=>{for(var n in r)f(e,n,{get:r[n],enumerable:!0})},F=(e,r,n,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of T(r))!M.call(e,l)&&l!==n&&f(e,l,{get:()=>r[l],enumerable:!(c=L(r,l))||c.enumerable});return e};var w=(e,r,n)=>(n=e!=null?C(B(e)):{},F(r||!e||!e.__esModule?f(n,"default",{value:e,enumerable:!0}):n,e)),q=e=>F(f({},"__esModule",{value:!0}),e);var _={};j(_,{default:()=>R});module.exports=q(_);var s=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/utils.js"),p=w(require("../../components/picture.js")),g=w(require("../../components/button.js"));function z(){const[e,r]=(0,i.useState)(window?.innerWidth||0);return(0,i.useEffect)(()=>{const n=()=>r(window?.innerWidth||0);return window?.addEventListener("resize",n),()=>window?.removeEventListener("resize",n)},[]),e<=768}const A=({products:e=[],className:r="",shape:n="square",itemShape:c="square",event:l,primaryButton:y=""})=>{const E=z(),[k,v]=(0,i.useState)(null),[N,h]=(0,i.useState)({}),b=(0,i.useRef)([]),m=(0,i.useRef)({}),W=(o,t)=>{t&&(b.current[o]=t)},x=o=>{const t={...m.current,[o]:!0};h(t),m.current=t};return(0,i.useEffect)(()=>{const o=b.current;return o?.forEach((t,d)=>{t.addEventListener("transitionend",()=>x(d))}),()=>{o?.forEach((t,d)=>{t.removeEventListener("transitionend",()=>x(d))})}},[]),E?(0,s.jsx)("div",{className:(0,a.cn)("flex gap-4 overflow-x-auto w-full h-[400px]",r),children:e?.map((o,t)=>(0,s.jsx)("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:(0,s.jsx)(p.default,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:o?.img})},t))}):(0,s.jsx)("div",{className:(0,a.cn)("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",r),children:e?.map((o,t)=>{const d=k===t;return(0,s.jsxs)("div",{style:{flex:d?6:1,transition:"all 0.3s ease-in-out"},ref:u=>u&&W(t,u),className:(0,a.cn)("relative overflow-hidden cursor-pointer",c==="round"?"rounded-2xl":""),onMouseEnter:()=>v(t),onMouseLeave:()=>{v(null);const u={...m.current,[t]:!1};h(u),m.current=u},children:[(0,s.jsx)(p.default,{source:o?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),N?.[t]?(0,s.jsxs)("div",{className:(0,a.cn)("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",d?"opacity-100":"opacity-0"),children:[(0,s.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,s.jsx)("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:o?.title}),(0,s.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:o?.subTitle})]}),(0,s.jsx)(g.default,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>l?.primaryButton?.onClick?.(o),className:(0,a.cn)("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base",n==="round"?"rounded-2xl":""),children:y})]}):null]},t)})})};var R=A;
1
+ "use strict";var L=Object.create;var f=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var M=Object.getPrototypeOf,R=Object.prototype.hasOwnProperty;var j=(t,r)=>{for(var o in r)f(t,o,{get:r[o],enumerable:!0})},w=(t,r,o,c)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of B(r))!R.call(t,l)&&l!==o&&f(t,l,{get:()=>r[l],enumerable:!(c=T(r,l))||c.enumerable});return t};var g=(t,r,o)=>(o=t!=null?L(M(t)):{},w(r||!t||!t.__esModule?f(o,"default",{value:t,enumerable:!0}):o,t)),q=t=>w(f({},"__esModule",{value:!0}),t);var H={};j(H,{default:()=>_});module.exports=q(H);var s=require("react/jsx-runtime"),d=require("../../helpers/utils.js"),v=g(require("../../components/picture.js")),y=g(require("../../components/button.js")),i=require("react");function z(){const[t,r]=(0,i.useState)(window?.innerWidth||0);return(0,i.useEffect)(()=>{const o=()=>r(window?.innerWidth||0);return window?.addEventListener("resize",o),()=>window?.removeEventListener("resize",o)},[]),t<=768}const A=({products:t=[],className:r="",shape:o="square",itemShape:c="square",event:l,primaryButton:k=""})=>{const E=z(),[N,b]=(0,i.useState)(null),[W,h]=(0,i.useState)({}),F=(0,i.useRef)([]),m=(0,i.useRef)({}),p=(0,i.useRef)({}),C=(n,e)=>{e&&(F.current[n]=e)},x=n=>{if(p.current?.[n]){const e={...m.current,[n]:!0};h(e),m.current=e}};return(0,i.useEffect)(()=>{const n=F.current;return n?.forEach((e,a)=>{e.addEventListener("transitionend",()=>x(a))}),()=>{n?.forEach((e,a)=>{e.removeEventListener("transitionend",()=>x(a))})}},[]),E?(0,s.jsx)("div",{className:(0,d.cn)("flex gap-4 overflow-x-auto w-full h-[400px]",r),children:t?.map((n,e)=>(0,s.jsx)("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:(0,s.jsx)(v.default,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:n?.img})},e))}):(0,s.jsx)("div",{className:(0,d.cn)("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",r),children:t?.map((n,e)=>{const a=N===e;return(0,s.jsxs)("div",{style:{flex:a?6:1,transition:"all 0.3s ease-in-out"},ref:u=>u&&C(e,u),className:(0,d.cn)("relative overflow-hidden cursor-pointer",c==="round"?"rounded-2xl":""),onMouseEnter:()=>{b(e),p.current[e]=!0},onMouseLeave:()=>{b(null);const u={...m.current,[e]:!1};h(u),m.current=u,p.current[e]=!1},children:[(0,s.jsx)(v.default,{source:n?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),W?.[e]?(0,s.jsxs)("div",{className:(0,d.cn)("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",a?"opacity-100":"opacity-0"),children:[(0,s.jsxs)("div",{className:"mr-1 flex-1 overflow-hidden",children:[(0,s.jsx)("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:n?.title}),(0,s.jsx)("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:n?.subTitle})]}),(0,s.jsx)(y.default,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>l?.primaryButton?.onClick?.(n),className:(0,d.cn)("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] border-[#FFFFFF] font-bold text-sm desktop:text-base",o==="round"?"rounded-2xl":""),children:k})]}):null]},e)})})};var _=A;
2
2
  //# sourceMappingURL=index.js.map
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/biz-components/AccordionCards/index.tsx"],
4
- "sourcesContent": ["import { useState, useEffect, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n const [width, setWidth] = useState(window?.innerWidth || 0)\n useEffect(() => {\n const onResize = () => setWidth(window?.innerWidth || 0)\n window?.addEventListener('resize', onResize)\n return () => window?.removeEventListener('resize', onResize)\n }, [])\n return width <= 768\n}\n\ntype AccordionCardsType = {\n products: Array<{\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n }>\n className?: string\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst AccordionCards = ({\n products = [],\n className = '',\n shape = 'square',\n itemShape = 'square',\n event,\n primaryButton = '',\n}: AccordionCardsType) => {\n const isMobile = useWindowWidth()\n const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({})\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const refWidth = useRef<{ [key: number]: boolean }>({})\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n const current = { ...refWidth.current, [index]: true }\n setCurrentWidth(current)\n refWidth.current = current\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n // \u79FB\u52A8\u7AEF\n if (isMobile) {\n return (\n <div className={cn('flex gap-4 overflow-x-auto w-full h-[400px]', className)}>\n {products?.map((item, idx) => (\n <div key={idx} className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\">\n <Picture className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" source={item?.img} />\n </div>\n ))}\n </div>\n )\n }\n\n // \u684C\u9762\u7AEF\n return (\n <div className={cn('h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]', className)}>\n {products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 6 : 1\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n transition: 'all 0.3s ease-in-out',\n }}\n ref={el => el && getRef(idx, el)}\n className={cn('relative overflow-hidden cursor-pointer', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => setHoverIndex(idx)}\n onMouseLeave={() => {\n setHoverIndex(null)\n const current = { ...refWidth.current, [idx]: false }\n setCurrentWidth(current)\n refWidth.current = current\n }}\n >\n <Picture source={item?.img} className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n {currentWidth?.[idx] ? (\n <div\n className={cn(\n 'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n 'transition-all duration-[50ms] delay-[300ms]',\n isExpanded ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">\n {item?.title}\n </p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n onClick={() => event?.primaryButton?.onClick?.(item)}\n className={cn(\n 'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base',\n shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {primaryButton}\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n )\n}\n\nexport default AccordionCards\n"],
5
- "mappings": "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",
6
- "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_utils", "import_picture", "import_button", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "Picture", "isExpanded", "Button"]
4
+ "sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n const [width, setWidth] = useState(window?.innerWidth || 0);\n useEffect(() => {\n const onResize = () => setWidth(window?.innerWidth || 0);\n window?.addEventListener('resize', onResize);\n return () => window?.removeEventListener('resize', onResize);\n }, []);\n return width <= 768;\n}\n\ntype AccordionCardsType = {\n products: Array<{\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n }>\n className?: string\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n },\n },\n}\n\nconst AccordionCards = ({\n products = [],\n className = '',\n shape = 'square',\n itemShape = 'square',\n event,\n primaryButton = '',\n}: AccordionCardsType) => {\n const isMobile = useWindowWidth();\n const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({});\n\n const accordionRef = useRef<HTMLDivElement[]>([]);\n const refWidth = useRef<{ [key: number]: boolean }>({});\n const enterRef = useRef<{ [key: number]: boolean }>({});\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el;\n }\n };\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n const current = { ...refWidth.current, [index]: true }\n setCurrentWidth(current)\n refWidth.current = current\n }\n };\n\n useEffect(() => {\n const element = accordionRef.current;\n element?.forEach((item, index) => {\n item.addEventListener('transitionend', () => handleTransitionEnd(index));\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index)); \n })\n };\n }, [])\n\n // \u79FB\u52A8\u7AEF\n if (isMobile) {\n return (\n <div className={cn(\"flex gap-4 overflow-x-auto w-full h-[400px]\", className)}>\n {products?.map((item, idx) => (\n <div\n key={idx}\n className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\"\n >\n <Picture\n className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={item?.img}\n />\n </div>\n ))}\n </div>\n );\n }\n\n // \u684C\u9762\u7AEF\n return (\n <div className={cn(\"h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]\", className)}>\n {products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx;\n const flexValue = isExpanded ? 6 : 1;\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n transition: 'all 0.3s ease-in-out',\n }}\n ref={(el) => el && getRef(idx, el)}\n className={cn(\n 'relative overflow-hidden cursor-pointer',\n itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => {\n setHoverIndex(idx)\n enterRef.current[idx] = true\n }}\n onMouseLeave={() => {\n setHoverIndex(null)\n const current = { ...refWidth.current, [idx]: false }\n setCurrentWidth(current)\n refWidth.current = current\n enterRef.current[idx] = false\n }}\n >\n <Picture\n source={item?.img}\n className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n {\n currentWidth?.[idx] ?\n <div className={cn(\n 'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n 'transition-all duration-[50ms] delay-[300ms]',\n isExpanded ? 'opacity-100' : 'opacity-0'\n )}>\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">{item?.title}</p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n onClick={() => event?.primaryButton?.onClick?.(item)}\n className={cn(\n 'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] border-[#FFFFFF] font-bold text-sm desktop:text-base',\n shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {primaryButton}\n </Button>\n </div>: null\n }\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default AccordionCards\n"],
5
+ "mappings": "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",
6
+ "names": ["AccordionCards_exports", "__export", "AccordionCards_default", "__toCommonJS", "import_jsx_runtime", "import_utils", "import_picture", "import_button", "import_react", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "Picture", "isExpanded", "Button"]
7
7
  }
@@ -1,2 +1,2 @@
1
- import{jsx as r,jsxs as c}from"react/jsx-runtime";import{useState as u,useEffect as h,useRef as b}from"react";import{cn as s}from"../../helpers/utils.js";import x from"../../components/picture.js";import W from"../../components/button.js";function C(){const[i,l]=u(window?.innerWidth||0);return h(()=>{const d=()=>l(window?.innerWidth||0);return window?.addEventListener("resize",d),()=>window?.removeEventListener("resize",d)},[]),i<=768}const L=({products:i=[],className:l="",shape:d="square",itemShape:F="square",event:w,primaryButton:g=""})=>{const y=C(),[E,m]=u(null),[k,f]=u({}),p=b([]),a=b({}),N=(t,e)=>{e&&(p.current[t]=e)},v=t=>{const e={...a.current,[t]:!0};f(e),a.current=e};return h(()=>{const t=p.current;return t?.forEach((e,n)=>{e.addEventListener("transitionend",()=>v(n))}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>v(n))})}},[]),y?r("div",{className:s("flex gap-4 overflow-x-auto w-full h-[400px]",l),children:i?.map((t,e)=>r("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:r(x,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img})},e))}):r("div",{className:s("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",l),children:i?.map((t,e)=>{const n=E===e;return c("div",{style:{flex:n?6:1,transition:"all 0.3s ease-in-out"},ref:o=>o&&N(e,o),className:s("relative overflow-hidden cursor-pointer",F==="round"?"rounded-2xl":""),onMouseEnter:()=>m(e),onMouseLeave:()=>{m(null);const o={...a.current,[e]:!1};f(o),a.current=o},children:[r(x,{source:t?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),k?.[e]?c("div",{className:s("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",n?"opacity-100":"opacity-0"),children:[c("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:t?.subTitle})]}),r(W,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>w?.primaryButton?.onClick?.(t),className:s("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base",d==="round"?"rounded-2xl":""),children:g})]}):null]},e)})})};var z=L;export{z as default};
1
+ import{jsx as r,jsxs as f}from"react/jsx-runtime";import{cn as s}from"../../helpers/utils.js";import F from"../../components/picture.js";import C from"../../components/button.js";import{useState as c,useEffect as x,useRef as m}from"react";function L(){const[i,l]=c(window?.innerWidth||0);return x(()=>{const a=()=>l(window?.innerWidth||0);return window?.addEventListener("resize",a),()=>window?.removeEventListener("resize",a)},[]),i<=768}const T=({products:i=[],className:l="",shape:a="square",itemShape:w="square",event:g,primaryButton:y=""})=>{const k=L(),[E,p]=c(null),[N,v]=c({}),b=m([]),d=m({}),u=m({}),W=(t,e)=>{e&&(b.current[t]=e)},h=t=>{if(u.current?.[t]){const e={...d.current,[t]:!0};v(e),d.current=e}};return x(()=>{const t=b.current;return t?.forEach((e,n)=>{e.addEventListener("transitionend",()=>h(n))}),()=>{t?.forEach((e,n)=>{e.removeEventListener("transitionend",()=>h(n))})}},[]),k?r("div",{className:s("flex gap-4 overflow-x-auto w-full h-[400px]",l),children:i?.map((t,e)=>r("div",{className:"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]",children:r(F,{className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover",source:t?.img})},e))}):r("div",{className:s("h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]",l),children:i?.map((t,e)=>{const n=E===e;return f("div",{style:{flex:n?6:1,transition:"all 0.3s ease-in-out"},ref:o=>o&&W(e,o),className:s("relative overflow-hidden cursor-pointer",w==="round"?"rounded-2xl":""),onMouseEnter:()=>{p(e),u.current[e]=!0},onMouseLeave:()=>{p(null);const o={...d.current,[e]:!1};v(o),d.current=o,u.current[e]=!1},children:[r(F,{source:t?.img,className:"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover"}),N?.[e]?f("div",{className:s("absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end","transition-all duration-[50ms] delay-[300ms]",n?"opacity-100":"opacity-0"),children:[f("div",{className:"mr-1 flex-1 overflow-hidden",children:[r("p",{className:"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]",children:t?.title}),r("h3",{className:"text-sm font-medium text-[#FFFFFF] desktop:text-lg",children:t?.subTitle})]}),r(C,{size:"sm",hoverEffect:"slide",variant:"secondary",onClick:()=>g?.primaryButton?.onClick?.(t),className:s("mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] border-[#FFFFFF] font-bold text-sm desktop:text-base",a==="round"?"rounded-2xl":""),children:y})]}):null]},e)})})};var z=T;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/AccordionCards/index.tsx"],
4
- "sourcesContent": ["import { useState, useEffect, useRef } from 'react'\nimport { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n const [width, setWidth] = useState(window?.innerWidth || 0)\n useEffect(() => {\n const onResize = () => setWidth(window?.innerWidth || 0)\n window?.addEventListener('resize', onResize)\n return () => window?.removeEventListener('resize', onResize)\n }, [])\n return width <= 768\n}\n\ntype AccordionCardsType = {\n products: Array<{\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n }>\n className?: string\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n }\n }\n}\n\nconst AccordionCards = ({\n products = [],\n className = '',\n shape = 'square',\n itemShape = 'square',\n event,\n primaryButton = '',\n}: AccordionCardsType) => {\n const isMobile = useWindowWidth()\n const [hoverIndex, setHoverIndex] = useState<number | null>(null)\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({})\n\n const accordionRef = useRef<HTMLDivElement[]>([])\n const refWidth = useRef<{ [key: number]: boolean }>({})\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el\n }\n }\n\n const handleTransitionEnd = (index: number) => {\n const current = { ...refWidth.current, [index]: true }\n setCurrentWidth(current)\n refWidth.current = current\n }\n\n useEffect(() => {\n const element = accordionRef.current\n element?.forEach((item, index) => {\n item.addEventListener('transitionend', () => handleTransitionEnd(index))\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index))\n })\n }\n }, [])\n\n // \u79FB\u52A8\u7AEF\n if (isMobile) {\n return (\n <div className={cn('flex gap-4 overflow-x-auto w-full h-[400px]', className)}>\n {products?.map((item, idx) => (\n <div key={idx} className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\">\n <Picture className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" source={item?.img} />\n </div>\n ))}\n </div>\n )\n }\n\n // \u684C\u9762\u7AEF\n return (\n <div className={cn('h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]', className)}>\n {products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx\n const flexValue = isExpanded ? 6 : 1\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n transition: 'all 0.3s ease-in-out',\n }}\n ref={el => el && getRef(idx, el)}\n className={cn('relative overflow-hidden cursor-pointer', itemShape === 'round' ? 'rounded-2xl' : '')}\n onMouseEnter={() => setHoverIndex(idx)}\n onMouseLeave={() => {\n setHoverIndex(null)\n const current = { ...refWidth.current, [idx]: false }\n setCurrentWidth(current)\n refWidth.current = current\n }}\n >\n <Picture source={item?.img} className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\" />\n {currentWidth?.[idx] ? (\n <div\n className={cn(\n 'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n 'transition-all duration-[50ms] delay-[300ms]',\n isExpanded ? 'opacity-100' : 'opacity-0'\n )}\n >\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">\n {item?.title}\n </p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n onClick={() => event?.primaryButton?.onClick?.(item)}\n className={cn(\n 'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] font-bold text-sm desktop:text-base',\n shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {primaryButton}\n </Button>\n </div>\n ) : null}\n </div>\n )\n })}\n </div>\n )\n}\n\nexport default AccordionCards\n"],
5
- "mappings": "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",
6
- "names": ["jsx", "jsxs", "useState", "useEffect", "useRef", "cn", "Picture", "Button", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "isExpanded", "AccordionCards_default"]
4
+ "sourcesContent": ["import { cn } from '../../helpers/utils.js'\nimport Picture from '../../components/picture.js'\nimport Button from '../../components/button.js'\nimport { useState, useEffect, useRef } from 'react'\n\n/** Hook\uFF1A\u76D1\u542C\u7A97\u53E3\u5BBD\u5EA6 */\nfunction useWindowWidth() {\n const [width, setWidth] = useState(window?.innerWidth || 0);\n useEffect(() => {\n const onResize = () => setWidth(window?.innerWidth || 0);\n window?.addEventListener('resize', onResize);\n return () => window?.removeEventListener('resize', onResize);\n }, []);\n return width <= 768;\n}\n\ntype AccordionCardsType = {\n products: Array<{\n /** \u6807\u9898\u6587\u672C */\n title: string\n /** \u56FE\u7247*/\n img: string\n /** \u5185\u5BB9\u8282\u70B9 */\n subTitle: string\n }>\n className?: string\n /** \u6309\u94AE\u5F62\u72B6 */\n shape?: 'round' | 'square'\n /** \u5361\u7247\u5F62\u72B6 */\n itemShape?: 'round' | 'square'\n /** \u4E3B\u6309\u94AE\u914D\u7F6E */\n primaryButton?: string\n /** \u6309\u94AE\u4E8B\u4EF6*/\n event?: {\n primaryButton?: {\n onClick: (v: any) => void\n },\n },\n}\n\nconst AccordionCards = ({\n products = [],\n className = '',\n shape = 'square',\n itemShape = 'square',\n event,\n primaryButton = '',\n}: AccordionCardsType) => {\n const isMobile = useWindowWidth();\n const [hoverIndex, setHoverIndex] = useState<number | null>(null);\n const [currentWidth, setCurrentWidth] = useState<{ [key: number]: boolean }>({});\n\n const accordionRef = useRef<HTMLDivElement[]>([]);\n const refWidth = useRef<{ [key: number]: boolean }>({});\n const enterRef = useRef<{ [key: number]: boolean }>({});\n\n const getRef = (index: number, el: HTMLDivElement) => {\n if (el) {\n accordionRef.current[index] = el;\n }\n };\n\n const handleTransitionEnd = (index: number) => {\n if (enterRef.current?.[index]) {\n const current = { ...refWidth.current, [index]: true }\n setCurrentWidth(current)\n refWidth.current = current\n }\n };\n\n useEffect(() => {\n const element = accordionRef.current;\n element?.forEach((item, index) => {\n item.addEventListener('transitionend', () => handleTransitionEnd(index));\n })\n return () => {\n element?.forEach((item, index) => {\n item.removeEventListener('transitionend', () => handleTransitionEnd(index)); \n })\n };\n }, [])\n\n // \u79FB\u52A8\u7AEF\n if (isMobile) {\n return (\n <div className={cn(\"flex gap-4 overflow-x-auto w-full h-[400px]\", className)}>\n {products?.map((item, idx) => (\n <div\n key={idx}\n className=\"grow-0 shrink-0 basis-[296px] bg-[#FFFFFF] border border-solid border-[#dddddd]\"\n >\n <Picture\n className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n source={item?.img}\n />\n </div>\n ))}\n </div>\n );\n }\n\n // \u684C\u9762\u7AEF\n return (\n <div className={cn(\"h-[336px] gap-4 flex w-full overflow-hidden laptop:h-[448px] desktop:h-[560px]\", className)}>\n {products?.map((item, idx) => {\n const isExpanded = hoverIndex === idx;\n const flexValue = isExpanded ? 6 : 1;\n return (\n <div\n key={idx}\n style={{\n flex: flexValue,\n transition: 'all 0.3s ease-in-out',\n }}\n ref={(el) => el && getRef(idx, el)}\n className={cn(\n 'relative overflow-hidden cursor-pointer',\n itemShape === 'round' ? 'rounded-2xl' : ''\n )}\n onMouseEnter={() => {\n setHoverIndex(idx)\n enterRef.current[idx] = true\n }}\n onMouseLeave={() => {\n setHoverIndex(null)\n const current = { ...refWidth.current, [idx]: false }\n setCurrentWidth(current)\n refWidth.current = current\n enterRef.current[idx] = false\n }}\n >\n <Picture\n source={item?.img}\n className=\"w-full h-full object-cover [&_img]:h-full [&_img]:object-cover\"\n />\n {\n currentWidth?.[idx] ?\n <div className={cn(\n 'absolute left-0 right-0 bottom-0 px-6 pb-6 overflow-hidden flex justify-between items-end',\n 'transition-all duration-[50ms] delay-[300ms]',\n isExpanded ? 'opacity-100' : 'opacity-0'\n )}>\n <div className=\"mr-1 flex-1 overflow-hidden\">\n <p className=\"mb-1 text-xl font-bold text-[#FFFFFF] laptop:text-2xl desktop:text-[32px]\">{item?.title}</p>\n <h3 className=\"text-sm font-medium text-[#FFFFFF] desktop:text-lg\">{item?.subTitle}</h3>\n </div>\n <Button\n size=\"sm\"\n hoverEffect=\"slide\"\n variant=\"secondary\"\n onClick={() => event?.primaryButton?.onClick?.(item)}\n className={cn(\n 'mb-1.5 overflow-hidden bg-transparent text-[#FFFFFF] border-[#FFFFFF] font-bold text-sm desktop:text-base',\n shape === 'round' ? 'rounded-2xl' : ''\n )}\n >\n {primaryButton}\n </Button>\n </div>: null\n }\n </div>\n );\n })}\n </div>\n );\n};\n\nexport default AccordionCards\n"],
5
+ "mappings": "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",
6
+ "names": ["jsx", "jsxs", "cn", "Picture", "Button", "useState", "useEffect", "useRef", "useWindowWidth", "width", "setWidth", "onResize", "AccordionCards", "products", "className", "shape", "itemShape", "event", "primaryButton", "isMobile", "hoverIndex", "setHoverIndex", "currentWidth", "setCurrentWidth", "accordionRef", "refWidth", "enterRef", "getRef", "index", "el", "handleTransitionEnd", "current", "element", "item", "idx", "isExpanded", "AccordionCards_default"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anker-in/headless-ui",
3
- "version": "0.0.27-alpha.13",
3
+ "version": "0.0.27-alpha.14",
4
4
  "type": "commonjs",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "types": "./dist/cjs/index.d.ts",