@liberfi.io/ui-scaffold 0.1.11 → 0.1.13
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/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +11 -9
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {memo,useState,useRef,useMemo,useEffect,useCallback}from'react';import {createPortal}from'react-dom';import {useValueRef,useCallbackRef,useEventEmitter}from'@liberfi.io/hooks';import {useTranslation}from'@liberfi.io/i18n';import {atomFamily,atomWithStorage,useAtom,useAtomValue,clsx,StyledTooltip,DraggableIcon,Button,RestoreWindowIcon,MinimizeIcon,UnMaximizeIcon,MaximizeIcon,XCloseIcon,useSetAtom,getDefaultStore,Link,useDisclosure}from'@liberfi.io/ui';import {throttle}from'@liberfi.io/utils';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var se=atomFamily(e=>atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Fe=atomFamily(e=>atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),Le=atomFamily(e=>atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),He=atomFamily(e=>atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),gt=atomFamily(e=>atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),ke=atomFamily(e=>atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),Te=atomFamily(e=>atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Ae=atomFamily(e=>atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=atomFamily(e=>atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),$e=atomFamily(e=>atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),Xe=atomFamily(e=>atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=atomFamily(e=>atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=atomFamily(e=>atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=atomFamily(e=>atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ue=atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function fe(e){let[t,o]=useAtom(gt(e)),[d,s]=useAtom(Xe(e)),h=useAtomValue(Ae(e)),g=useAtomValue($e(e)),n=useSetAtom(Te(e)),i=useSetAtom(_e(e)),w=useSetAtom(ke(e)),R=useSetAtom(he(e)),m=useCallback((S={})=>{let{shouldStartDragging:K,position:Q,size:le}=S;Q&&i(_=>({..._,...Q})),le&&n(_=>({..._,...le})),w(K??false),o(true),R("modal");},[o,i,n,w]),P=useCallback(()=>{o(false),d&&(n({...h}),i({...g}),s(false));},[d,h,g,s,o,n,i]);return useMemo(()=>({isOpen:t,onOpen:m,onClose:P}),[t,m,P])}function pe(e){let[t,o]=useAtom(se(e)),d=useSetAtom(Fe(e)),s=useSetAtom(he(e)),h=useSetAtom(Ue),g=useCallback((R={})=>{let m=R.position??"left";d(R.width??320),o(m),s(m),h(({left:P,right:S})=>m==="left"?{left:{...P,[e]:Date.now()},right:S}:{left:P,right:{...S,[e]:Date.now()}});},[e,o,d]),n=useCallback(()=>{o("none");},[o]),i=useMemo(()=>t!=="none",[t]),w=useMemo(()=>t!=="none"?t:void 0,[t]);return useMemo(()=>({isOpen:i,position:w,onOpen:g,onClose:n}),[i,g,n])}var cn={width:200,height:48},Se={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},mn={x:20,y:20},Rt=memo(function({id:t,title:o,minWidth:d=504,maxWidth:s=Se.width,minHeight:h=200,maxHeight:g=Se.height,leftSidebar:n,leftSidebarWidth:i=200,rightSidebar:w,rightSidebarWidth:R=200,aspectRatio:m,showHeader:P=true,header:S,headerHeight:K=44,children:Q}){let{t:le}=useTranslation(),{isOpen:_,onClose:Ee}=fe(t),{onOpen:Je}=pe(t),[H,$]=useAtom(Xe(t)),[u,qe]=useAtom(_e(t)),[c,Ge]=useAtom(Te(t)),[de,ue]=useAtom(Ae(t)),[ee,te]=useAtom($e(t)),[Me,ve]=useAtom(ke(t)),[O,ne]=useState(Me),[Re,f]=useState(false),[N,Z]=useState(null),[oe,j]=useState(null),[ie,E]=useState(null),[ce,J]=useState(null),X=useRef(null),Lt=useAtomValue(Le(t)),Ht=useAtomValue(He(t)),Y=useValueRef(u),x=useCallbackRef(qe),re=useValueRef(c),I=useCallbackRef(Ge),kt=useValueRef(i),Tt=useValueRef(!!n),At=useValueRef(R),_t=useValueRef(!!w),T=useValueRef(m),B=useValueRef(K),Pe=useValueRef(d),ze=useValueRef(s),De=useValueRef(h),We=useValueRef(g),$t=useValueRef(O),lt=useValueRef(oe),Ke=useValueRef(ce),Xt=useCallbackRef(Ee),Yt=useCallbackRef(Je),Bt=useValueRef(Lt),Ut=useValueRef(Ht),Oe=useMemo(()=>c.width===Se.width&&c.height===Se.height,[c.width,c.height]);useEffect(()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)});let r=u.x+c.width,C=u.y+c.height;(r>window.innerWidth||C>window.innerHeight)&&x({x:Math.min(u.x,Math.max(0,window.innerWidth-c.width)),y:Math.min(u.y,Math.max(0,window.innerHeight-c.height))});},[t]),useEffect(()=>{if(_&&Me){ne(true);let r=q=>{x({x:q.clientX-c.width/2,y:q.clientY-20});},C=()=>{ne(false),ve(false),document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C);};return document.addEventListener("mousemove",r),document.addEventListener("mouseup",C),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C),document.body.style.cursor="";}}},[_,Me,ve,c.width]);let A=(r,C,q)=>{ve(false),ne(false),f(false),Z(null),C==="drag"?ne(true):C==="resize"&&(Z(q||null),f(true));let dt=r.clientX,ut=r.clientY,F=re.current.width,k=re.current.height,L={...Y.current},ct=()=>{document.removeEventListener("mousemove",mt),document.removeEventListener("mouseup",ht),document.body.style.cursor="",ne(false),f(false),Z(null),j(null),X.current&&(clearTimeout(X.current),X.current=null),J(null),E(null);},mt=Ie=>{if(C==="drag"){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=L.x+U,l=L.y+V,me=Tt.current?kt.current:0,Ne=12+me,z=_t.current?At.current:0,y=window.innerWidth-12-F-z,Ce=window.innerHeight-12-44,M=b<=Ne?"left":b>=y?"right":null;M!==lt.current&&j(M),X.current&&M&&E(M),X.current&&(Ke.current==="left"&&(b>Ne||M!=="left")||Ke.current==="right"&&(b<y||M!=="right"))&&(clearTimeout(X.current),X.current=null,J(null),E(null)),!X.current&&M&&Ke.current!==M&&(J(M),E(M),X.current=setTimeout(()=>{$t.current&<.current===M?(ct(),Xt(),Yt({position:M,width:Math.min(Math.max(re.current.width,Bt.current),Ut.current)})):J(null);},350)),b=Math.min(Math.max(b,12+me),y),l=Math.min(Math.max(l,12),Ce),x({x:b,y:l});}else if(C==="resize"&&q){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=(l,me,Ne)=>{let z=Math.min(Math.max(l,Pe.current),ze.current),y=Math.min(Math.max(me,De.current),We.current);if(T.current){if(Ne==="width")y=Math.min(Math.max(l/T.current+B.current,De.current),We.current),z=(y-B.current)*T.current;else if(Ne==="height")z=Math.min(Math.max((me-B.current)*T.current,Pe.current),ze.current),y=z/T.current+B.current;else {let Ce=l/T.current+B.current,M=(me-B.current)*T.current,ft=Math.abs(U),pt=Math.abs(V);if(ft>1.1*pt)y=Math.min(Math.max(Ce,De.current),We.current),z=(y-B.current)*T.current;else if(pt>1.1*ft)z=Math.min(Math.max(M,Pe.current),ze.current),y=z/T.current+B.current;else {let jt=(y+Ce)/2;z=Math.min(Math.max((z+M)/2,Pe.current),ze.current),y=Math.min(Math.max(jt,De.current),We.current),z=(y-B.current)*T.current;}}z=Math.min(Math.max(z,Pe.current),ze.current),y=Math.min(Math.max(y,De.current),We.current);}return {width:z,height:y}};switch(q){case "topLeft":{let l=b(F-U,k-V,"both");I(l),x({x:L.x+(F-l.width),y:L.y+(k-l.height)});break}case "topRight":{let l=b(F+U,k-V,"both");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottomLeft":{let l=b(F-U,k+V,"both");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "bottomRight":{I(b(F+U,k+V,"both"));break}case "top":{let l=b(F,k-V,"height");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottom":{I(b(F,k+V,"height"));break}case "left":{let l=b(F-U,k,"width");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "right":{I(b(F+U,k,"width"));break}}}},ht=()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)}),ct();};document.addEventListener("mousemove",mt),document.addEventListener("mouseup",ht);},Vt=useCallback(()=>{H?(I({...de}),x({...ee}),$(false)):(Oe?x({...ee}):(ue({...c}),te({...u})),I({...cn}),$(true));},[H,Oe,c,u,de,ee,$,ue,te]),Zt=useCallback(()=>{Oe?(I({...de}),x({...ee})):(H?$(false):(ue({...c}),te({...u})),I({...Se}),x({...mn}));},[Oe,H,c,u,de,ee,$,ue,te]);return useEffect(()=>{let r=throttle(()=>{(Y.current.x<0||Y.current.y<0)&&x({x:Math.max(0,Y.current.x),y:Math.max(0,Y.current.y)});let C=Y.current.x+re.current.width,q=Y.current.y+re.current.height;(C>window.innerWidth||q>window.innerHeight)&&x({x:Math.min(Y.current.x,Math.max(0,window.innerWidth-re.current.width)),y:Math.min(Y.current.y,Math.max(0,window.innerHeight-re.current.height))});},100);return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r);}},[]),_?jsxs(Fragment,{children:[(O||Re)&&createPortal(jsx("div",{className:clsx("max-sm:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",O&&(ce?"cursor-grabbing":"cursor-move"),!O&&{"cursor-ns-resize":N==="top"||N==="bottom","cursor-ew-resize":N==="left"||N==="right","cursor-nwse-resize":N==="topLeft"||N==="bottomRight","cursor-nesw-resize":N==="topRight"||N==="bottomLeft","cursor-auto":N===null})}),document.body),jsx("div",{className:clsx("max-sm:hidden fixed z-50 left-0 top-0",O?"will-change-transform":"will-change-auto",Re||O?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(u.x-(n?i:0))}px, ${Math.round(u.y)}px)`},children:jsxs("div",{className:"flex relative z-50",children:[n&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:i,height:H?40:c.height-8},children:n}),jsx("div",{className:clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",O?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:c.width,height:c.height,transition:Re||O?"none":"transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:jsxs("div",{className:clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!H&&jsxs(Fragment,{children:[jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:r=>A(r,"resize","topLeft")}),jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:r=>A(r,"resize","topRight")}),jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:r=>A(r,"resize","bottomLeft")}),jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:r=>A(r,"resize","bottomRight")}),jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:r=>A(r,"resize","top")}),jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:r=>A(r,"resize","bottom")}),jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:r=>A(r,"resize","left")}),jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:r=>A(r,"resize","right")})]}),P&&jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:r=>A(r,"drag"),style:{height:K},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),S||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:r=>r.stopPropagation(),children:o}),jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:r=>r.stopPropagation(),children:[jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Vt,children:H?jsx(RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsx(MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Zt,children:Oe?jsx(UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsx(MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ee,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!H&&jsx("div",{className:P?"h-[calc(100%-44px)] overflow-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto cursor-move",onMouseDown:P?void 0:r=>A(r,"drag"),children:Q})]})}),w&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:R,height:H?40:c.height-8},children:w})]})})]}):null});function st({id:e,title:t,maxWidth:o=440,minWidth:d=320,position:s,showHeader:h=true,header:g,headerHeight:n=44,children:i}){let{t:w}=useTranslation(),R=useAtomValue(se(e)),[m,P]=useState(false),[S,K]=useState(false),[Q,le]=useAtom(Fe(e)),{onOpen:_}=fe(e),{onClose:Ee}=pe(e),Je=useAtomValue(Ye(e)),H=useAtomValue(Be(e)),$=useValueRef(Q),u=useValueRef(o),qe=useValueRef(d),c=useValueRef(s),Ge=useValueRef(m),de=useValueRef(S),ue=useCallbackRef(le),ee=useCallbackRef(_),te=useCallbackRef(Ee),Me=useValueRef(Je),ve=useValueRef(H),O=f=>{f.preventDefault(),f.stopPropagation(),P(true),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.height="100%";let N=f.clientX,Z=$.current,oe=ie=>{if(!Ge.current)return;let E=ie.clientX-N,ce=c.current==="right"?Z-E:Z+E,J=Math.min(Math.max(ce,qe.current),u.current);ue(J);},j=()=>{P(false),document.body.style.cursor="",document.body.style.userSelect="",document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.height="",document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",j);};document.addEventListener("mousemove",oe),document.addEventListener("mouseup",j);},ne=f=>{if(f.target instanceof HTMLElement&&f.target.closest("button"))return;f.preventDefault(),K(true);let N=f.clientX,Z=f.clientY,oe=()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",ie),K(false);},j=E=>{if(!de.current)return;let ce=Math.abs(E.clientX-N),J=Math.abs(E.clientY-Z);(ce>10||J>10)&&(oe(),te(),ee({shouldStartDragging:true,position:{x:E.clientX-$.current/2+20,y:E.clientY-20},size:{width:Math.min(Math.max($.current,Me.current),ve.current)}}));},ie=()=>{oe();};document.addEventListener("mousemove",j),document.addEventListener("mouseup",ie);},Re=()=>{te();};return R!==s?null:jsxs("div",{className:"max-sm:hidden flex-none flex flex-row overflow-hidden",children:[s==="right"&&jsx(zt,{isResizing:m,handleResizeStart:O}),jsxs("div",{className:clsx("flex flex-col min-h-0 overflow-hidden bg-content1",S?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:m||S?"none":"transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:[h&&jsxs("div",{className:"flex-none relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:ne,style:{height:n},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:w("scaffold.draggablePanel.snapToModal"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),g||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:f=>f.stopPropagation(),children:t}),jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:f=>f.stopPropagation(),children:jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Re,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsx("div",{className:"flex-auto min-h-0 overflow-y-auto",children:i})]}),s==="left"&&jsx(zt,{isResizing:m,handleResizeStart:O})]})}function zt({isResizing:e,handleResizeStart:t}){return jsxs("div",{className:"relative",children:[jsxs("div",{className:"relative w-1 h-full cursor-ew-resize bg-border/80 hover:bg-border transition-colors duration-150 ease-in-out group flex flex-col items-center justify-center gap-1",children:[jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:t})]}),e&&jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function So({contents:e=[],className:t,classNames:o,children:d}){let s=useAtomValue(Ue);useEffect(()=>{let n=getDefaultStore();e.forEach(i=>{n.set(Le(i.id),i.panelMinWidth??320),n.set(He(i.id),i.panelMaxWidth??440),n.set(Ye(i.id),i.modalMinWidth??504),n.set(Be(i.id),i.modalMaxWidth??window.innerWidth-40);});},[e]);let h=useMemo(()=>e.filter(n=>{let i=getDefaultStore();return s.left[n.id]?i.get(se(n.id))==="left":false}).sort((n,i)=>s.left[i.id]-s.left[n.id]),[e,s.left]),g=useMemo(()=>e.filter(n=>{let i=getDefaultStore();return s.right[n.id]?i.get(se(n.id))==="right":false}).sort((n,i)=>(s.right[n.id]??0)-(s.right[i.id]??0)),[e,s.right]);return jsxs(Fragment,{children:[jsxs("div",{className:clsx("w-full h-full flex flex-row overflow-hidden",t,o?.root),children:[jsx("div",{className:clsx("flex-none h-full flex flex-row",o?.left),children:h.map(n=>jsx(st,{...n,position:"left",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`left-${n.id}`))}),jsx("div",{className:clsx("flex-auto min-w-0 h-full",o?.content),children:d}),jsx("div",{className:clsx("flex-none h-full flex flex-row",o?.right),children:g.map(n=>jsx(st,{...n,position:"right",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`right-${n.id}`))})]}),e.map(n=>jsx(Rt,{...n,minWidth:n.modalMinWidth??504,maxWidth:n.modalMaxWidth??window.innerWidth-40},`modal-${n.id}`))]})}function To(e){let{isOpen:t,onOpen:o,onClose:d}=fe(e),{isOpen:s,onOpen:h,onClose:g}=pe(e),n=useAtomValue(he(e)),i=useCallback(()=>{t||s||(n==="modal"?o():h({position:n}));},[t,s,n,o,h]),w=useCallback(()=>{t?d():s&&g();},[t,s,d,g]),R=useMemo(()=>t||s,[t,s]);return useMemo(()=>({isOpen:R,onOpen:i,onClose:w}),[R,i,w])}function jo({children:e,className:t}){return jsx("div",{className:clsx("max-sm:hidden flex-none w-full h-15 px-6 max-lg:px-4 gap-6 max-lg:gap-4 flex justify-between items-center border-b border-border bg-background",t),children:e})}function Ko({children:e,className:t}){return jsx("div",{className:clsx("sm:hidden flex-none w-full h-11 px-2 flex justify-between items-center border-b border-border bg-background",t),children:e})}function ni({children:e,className:t}){return jsx("div",{className:clsx("sm:hidden flex-none w-full h-14 flex justify-evenly items-center border-t border-border bg-background",t),children:e})}function si({children:e,className:t}){return jsx("div",{className:clsx("flex flex-col w-full h-screen max-sm:h-dvh overflow-hidden bg-background",t),children:e})}function ui({className:e,children:t}){return jsx("div",{className:clsx("flex-auto w-full min-h-0",e),children:t})}function pi({href:e="/",icon:t,miniIcon:o,className:d}){let{t:s}=useTranslation();return jsxs(Link,{href:e,className:clsx("flex-none flex justify-center items-center",d),"aria-label":s("scaffold.home"),children:[jsx("div",{className:clsx("flex justify-center items-center",!!o&&"max-xl:hidden"),children:t}),o&&jsx("div",{className:"flex justify-center items-center xl:hidden",children:o})]})}function yi({href:e,title:t,active:o=false,className:d}){return jsx(Link,{"data-active":o,href:e,className:clsx("h-8 text-sm font-medium px-2 xl:px-3 data-[active=true]:text-primary hover:text-primary text-foreground hover:bg-primary-50 rounded-sm",d),"aria-label":t,children:t})}function Fi({id:e,children:t}){let o=useEventEmitter(),{isOpen:d,onOpen:s,onClose:h,onOpenChange:g}=useDisclosure(),[n,i]=useState(void 0),[w,R]=useState(void 0);return useEffect(()=>{let m=({params:P,onResult:S})=>{i(P),R(S),s();};return o.on(`open_modal:${e}`,m),()=>{o.off(`open_modal:${e}`,m);}},[e,s,o]),useEffect(()=>{let m=()=>{h();};return o.on(`close_modal:${e}`,m),()=>{o.off(`close_modal:${e}`,m);}},[e,h,o]),t({params:n,isOpen:d,onClose:h,onOpenChange:g,onResult:w})}function Ti(e){let t=useEventEmitter(),o=useCallback(s=>{t.emit(`open_modal:${e}`,s);},[e,t]),d=useCallback(()=>{t.emit(`close_modal:${e}`);},[e,t]);return {onOpen:o,onClose:d}}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.8");var Bn="0.1.8";export{Fi as AsyncModal,Rt as DraggableModal,st as DraggablePanel,So as DraggablePanelProvider,ni as Footer,jo as Header,yi as HeaderNavigation,pi as Logo,Ko as MobileHeader,si as Page,ui as PageContent,Ti as useAsyncModal,To as useDraggableDisclosure,fe as useDraggableModalDisclosure,pe as useDraggablePanelDisclosure,Bn as version};//# sourceMappingURL=index.mjs.map
|
|
1
|
+
import {memo,useState,useRef,useMemo,useEffect,useCallback}from'react';import {createPortal}from'react-dom';import {useAtom,useAtomValue,useSetAtom,getDefaultStore}from'jotai';import {useValueRef,useCallbackRef,useEventEmitter}from'@liberfi.io/hooks';import {useTranslation}from'@liberfi.io/i18n';import {clsx,StyledTooltip,DraggableIcon,Button,RestoreWindowIcon,MinimizeIcon,UnMaximizeIcon,MaximizeIcon,XCloseIcon,Link,useDisclosure}from'@liberfi.io/ui';import {throttle}from'@liberfi.io/utils';import {atomFamily,atomWithStorage}from'jotai/utils';import {jsxs,Fragment,jsx}from'react/jsx-runtime';var se=atomFamily(e=>atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Fe=atomFamily(e=>atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),Le=atomFamily(e=>atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),He=atomFamily(e=>atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),gt=atomFamily(e=>atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),ke=atomFamily(e=>atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),Te=atomFamily(e=>atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Ae=atomFamily(e=>atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=atomFamily(e=>atomWithStorage(`modalPosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),$e=atomFamily(e=>atomWithStorage(`modalRestorePosition.${e??"default"}`,{x:typeof window<"u"?Math.max(0,(window.innerWidth-350)/2):0,y:typeof window<"u"?Math.max(0,(window.innerHeight-580)/2):0},void 0,{getOnInit:true})),Xe=atomFamily(e=>atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=atomFamily(e=>atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=atomFamily(e=>atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=atomFamily(e=>atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ue=atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function fe(e){let[t,o]=useAtom(gt(e)),[d,s]=useAtom(Xe(e)),h=useAtomValue(Ae(e)),g=useAtomValue($e(e)),n=useSetAtom(Te(e)),i=useSetAtom(_e(e)),w=useSetAtom(ke(e)),R=useSetAtom(he(e)),m=useCallback((S={})=>{let{shouldStartDragging:K,position:Q,size:le}=S;Q&&i(_=>({..._,...Q})),le&&n(_=>({..._,...le})),w(K??false),o(true),R("modal");},[o,i,n,w]),P=useCallback(()=>{o(false),d&&(n({...h}),i({...g}),s(false));},[d,h,g,s,o,n,i]);return useMemo(()=>({isOpen:t,onOpen:m,onClose:P}),[t,m,P])}function pe(e){let[t,o]=useAtom(se(e)),d=useSetAtom(Fe(e)),s=useSetAtom(he(e)),h=useSetAtom(Ue),g=useCallback((R={})=>{let m=R.position??"left";d(R.width??320),o(m),s(m),h(({left:P,right:S})=>m==="left"?{left:{...P,[e]:Date.now()},right:S}:{left:P,right:{...S,[e]:Date.now()}});},[e,o,d]),n=useCallback(()=>{o("none");},[o]),i=useMemo(()=>t!=="none",[t]),w=useMemo(()=>t!=="none"?t:void 0,[t]);return useMemo(()=>({isOpen:i,position:w,onOpen:g,onClose:n}),[i,g,n])}var cn={width:200,height:48},Se={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},mn={x:20,y:20},Rt=memo(function({id:t,title:o,minWidth:d=504,maxWidth:s=Se.width,minHeight:h=200,maxHeight:g=Se.height,leftSidebar:n,leftSidebarWidth:i=200,rightSidebar:w,rightSidebarWidth:R=200,aspectRatio:m,showHeader:P=true,header:S,headerHeight:K=44,children:Q}){let{t:le}=useTranslation(),{isOpen:_,onClose:Ee}=fe(t),{onOpen:Je}=pe(t),[H,$]=useAtom(Xe(t)),[u,qe]=useAtom(_e(t)),[c,Ge]=useAtom(Te(t)),[de,ue]=useAtom(Ae(t)),[ee,te]=useAtom($e(t)),[Me,ve]=useAtom(ke(t)),[O,ne]=useState(Me),[Re,f]=useState(false),[N,Z]=useState(null),[oe,j]=useState(null),[ie,E]=useState(null),[ce,J]=useState(null),X=useRef(null),Lt=useAtomValue(Le(t)),Ht=useAtomValue(He(t)),Y=useValueRef(u),x=useCallbackRef(qe),re=useValueRef(c),I=useCallbackRef(Ge),kt=useValueRef(i),Tt=useValueRef(!!n),At=useValueRef(R),_t=useValueRef(!!w),T=useValueRef(m),B=useValueRef(K),Pe=useValueRef(d),ze=useValueRef(s),De=useValueRef(h),We=useValueRef(g),$t=useValueRef(O),lt=useValueRef(oe),Ke=useValueRef(ce),Xt=useCallbackRef(Ee),Yt=useCallbackRef(Je),Bt=useValueRef(Lt),Ut=useValueRef(Ht),Oe=useMemo(()=>c.width===Se.width&&c.height===Se.height,[c.width,c.height]);useEffect(()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)});let r=u.x+c.width,C=u.y+c.height;(r>window.innerWidth||C>window.innerHeight)&&x({x:Math.min(u.x,Math.max(0,window.innerWidth-c.width)),y:Math.min(u.y,Math.max(0,window.innerHeight-c.height))});},[t]),useEffect(()=>{if(_&&Me){ne(true);let r=q=>{x({x:q.clientX-c.width/2,y:q.clientY-20});},C=()=>{ne(false),ve(false),document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C);};return document.addEventListener("mousemove",r),document.addEventListener("mouseup",C),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",C),document.body.style.cursor="";}}},[_,Me,ve,c.width]);let A=(r,C,q)=>{ve(false),ne(false),f(false),Z(null),C==="drag"?ne(true):C==="resize"&&(Z(q||null),f(true));let dt=r.clientX,ut=r.clientY,F=re.current.width,k=re.current.height,L={...Y.current},ct=()=>{document.removeEventListener("mousemove",mt),document.removeEventListener("mouseup",ht),document.body.style.cursor="",ne(false),f(false),Z(null),j(null),X.current&&(clearTimeout(X.current),X.current=null),J(null),E(null);},mt=Ie=>{if(C==="drag"){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=L.x+U,l=L.y+V,me=Tt.current?kt.current:0,Ne=12+me,z=_t.current?At.current:0,y=window.innerWidth-12-F-z,Ce=window.innerHeight-12-44,M=b<=Ne?"left":b>=y?"right":null;M!==lt.current&&j(M),X.current&&M&&E(M),X.current&&(Ke.current==="left"&&(b>Ne||M!=="left")||Ke.current==="right"&&(b<y||M!=="right"))&&(clearTimeout(X.current),X.current=null,J(null),E(null)),!X.current&&M&&Ke.current!==M&&(J(M),E(M),X.current=setTimeout(()=>{$t.current&<.current===M?(ct(),Xt(),Yt({position:M,width:Math.min(Math.max(re.current.width,Bt.current),Ut.current)})):J(null);},350)),b=Math.min(Math.max(b,12+me),y),l=Math.min(Math.max(l,12),Ce),x({x:b,y:l});}else if(C==="resize"&&q){let U=Ie.clientX-dt,V=Ie.clientY-ut,b=(l,me,Ne)=>{let z=Math.min(Math.max(l,Pe.current),ze.current),y=Math.min(Math.max(me,De.current),We.current);if(T.current){if(Ne==="width")y=Math.min(Math.max(l/T.current+B.current,De.current),We.current),z=(y-B.current)*T.current;else if(Ne==="height")z=Math.min(Math.max((me-B.current)*T.current,Pe.current),ze.current),y=z/T.current+B.current;else {let Ce=l/T.current+B.current,M=(me-B.current)*T.current,ft=Math.abs(U),pt=Math.abs(V);if(ft>1.1*pt)y=Math.min(Math.max(Ce,De.current),We.current),z=(y-B.current)*T.current;else if(pt>1.1*ft)z=Math.min(Math.max(M,Pe.current),ze.current),y=z/T.current+B.current;else {let jt=(y+Ce)/2;z=Math.min(Math.max((z+M)/2,Pe.current),ze.current),y=Math.min(Math.max(jt,De.current),We.current),z=(y-B.current)*T.current;}}z=Math.min(Math.max(z,Pe.current),ze.current),y=Math.min(Math.max(y,De.current),We.current);}return {width:z,height:y}};switch(q){case "topLeft":{let l=b(F-U,k-V,"both");I(l),x({x:L.x+(F-l.width),y:L.y+(k-l.height)});break}case "topRight":{let l=b(F+U,k-V,"both");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottomLeft":{let l=b(F-U,k+V,"both");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "bottomRight":{I(b(F+U,k+V,"both"));break}case "top":{let l=b(F,k-V,"height");I(l),x({x:L.x,y:L.y+(k-l.height)});break}case "bottom":{I(b(F,k+V,"height"));break}case "left":{let l=b(F-U,k,"width");I(l),x({x:L.x+(F-l.width),y:L.y});break}case "right":{I(b(F+U,k,"width"));break}}}},ht=()=>{(u.x<0||u.y<0)&&x({x:Math.max(0,u.x),y:Math.max(0,u.y)}),ct();};document.addEventListener("mousemove",mt),document.addEventListener("mouseup",ht);},Vt=useCallback(()=>{H?(I({...de}),x({...ee}),$(false)):(Oe?x({...ee}):(ue({...c}),te({...u})),I({...cn}),$(true));},[H,Oe,c,u,de,ee,$,ue,te]),Zt=useCallback(()=>{Oe?(I({...de}),x({...ee})):(H?$(false):(ue({...c}),te({...u})),I({...Se}),x({...mn}));},[Oe,H,c,u,de,ee,$,ue,te]);return useEffect(()=>{let r=throttle(()=>{(Y.current.x<0||Y.current.y<0)&&x({x:Math.max(0,Y.current.x),y:Math.max(0,Y.current.y)});let C=Y.current.x+re.current.width,q=Y.current.y+re.current.height;(C>window.innerWidth||q>window.innerHeight)&&x({x:Math.min(Y.current.x,Math.max(0,window.innerWidth-re.current.width)),y:Math.min(Y.current.y,Math.max(0,window.innerHeight-re.current.height))});},100);return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r);}},[]),_?jsxs(Fragment,{children:[(O||Re)&&createPortal(jsx("div",{className:clsx("max-sm:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",O&&(ce?"cursor-grabbing":"cursor-move"),!O&&{"cursor-ns-resize":N==="top"||N==="bottom","cursor-ew-resize":N==="left"||N==="right","cursor-nwse-resize":N==="topLeft"||N==="bottomRight","cursor-nesw-resize":N==="topRight"||N==="bottomLeft","cursor-auto":N===null})}),document.body),jsx("div",{className:clsx("max-sm:hidden fixed z-50 left-0 top-0",O?"will-change-transform":"will-change-auto",Re||O?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(u.x-(n?i:0))}px, ${Math.round(u.y)}px)`},children:jsxs("div",{className:"flex relative z-50",children:[n&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:i,height:H?40:c.height-8},children:n}),jsx("div",{className:clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",O?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:c.width,height:c.height,transition:Re||O?"none":"transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:jsxs("div",{className:clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!H&&jsxs(Fragment,{children:[jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:r=>A(r,"resize","topLeft")}),jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:r=>A(r,"resize","topRight")}),jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:r=>A(r,"resize","bottomLeft")}),jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:r=>A(r,"resize","bottomRight")}),jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:r=>A(r,"resize","top")}),jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:r=>A(r,"resize","bottom")}),jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:r=>A(r,"resize","left")}),jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:r=>A(r,"resize","right")})]}),P&&jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:r=>A(r,"drag"),style:{height:K},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),S||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:r=>r.stopPropagation(),children:o}),jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:r=>r.stopPropagation(),children:[jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Vt,children:H?jsx(RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsx(MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Zt,children:Oe?jsx(UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsx(MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ee,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!H&&jsx("div",{className:P?"h-[calc(100%-44px)] overflow-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto cursor-move",onMouseDown:P?void 0:r=>A(r,"drag"),children:Q})]})}),w&&jsx("div",{className:clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",O?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:R,height:H?40:c.height-8},children:w})]})})]}):null});function st({id:e,title:t,maxWidth:o=440,minWidth:d=320,position:s,showHeader:h=true,header:g,headerHeight:n=44,children:i}){let{t:w}=useTranslation(),R=useAtomValue(se(e)),[m,P]=useState(false),[S,K]=useState(false),[Q,le]=useAtom(Fe(e)),{onOpen:_}=fe(e),{onClose:Ee}=pe(e),Je=useAtomValue(Ye(e)),H=useAtomValue(Be(e)),$=useValueRef(Q),u=useValueRef(o),qe=useValueRef(d),c=useValueRef(s),Ge=useValueRef(m),de=useValueRef(S),ue=useCallbackRef(le),ee=useCallbackRef(_),te=useCallbackRef(Ee),Me=useValueRef(Je),ve=useValueRef(H),O=f=>{f.preventDefault(),f.stopPropagation(),P(true),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",document.body.style.overflow="hidden",document.body.style.position="fixed",document.body.style.width="100%",document.body.style.height="100%";let N=f.clientX,Z=$.current,oe=ie=>{if(!Ge.current)return;let E=ie.clientX-N,ce=c.current==="right"?Z-E:Z+E,J=Math.min(Math.max(ce,qe.current),u.current);ue(J);},j=()=>{P(false),document.body.style.cursor="",document.body.style.userSelect="",document.body.style.overflow="",document.body.style.position="",document.body.style.width="",document.body.style.height="",document.removeEventListener("mousemove",oe),document.removeEventListener("mouseup",j);};document.addEventListener("mousemove",oe),document.addEventListener("mouseup",j);},ne=f=>{if(f.target instanceof HTMLElement&&f.target.closest("button"))return;f.preventDefault(),K(true);let N=f.clientX,Z=f.clientY,oe=()=>{document.removeEventListener("mousemove",j),document.removeEventListener("mouseup",ie),K(false);},j=E=>{if(!de.current)return;let ce=Math.abs(E.clientX-N),J=Math.abs(E.clientY-Z);(ce>10||J>10)&&(oe(),te(),ee({shouldStartDragging:true,position:{x:E.clientX-$.current/2+20,y:E.clientY-20},size:{width:Math.min(Math.max($.current,Me.current),ve.current)}}));},ie=()=>{oe();};document.addEventListener("mousemove",j),document.addEventListener("mouseup",ie);},Re=()=>{te();};return R!==s?null:jsxs("div",{className:"max-sm:hidden flex-none flex flex-row overflow-hidden",children:[s==="right"&&jsx(zt,{isResizing:m,handleResizeStart:O}),jsxs("div",{className:clsx("flex flex-col min-h-0 overflow-hidden bg-content1",S?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:m||S?"none":"transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1), height 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.33, 1, 0.68, 1)",contain:"content"},children:[h&&jsxs("div",{className:"flex-none relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:ne,style:{height:n},children:[jsx(StyledTooltip,{placement:"top",closeDelay:0,content:w("scaffold.draggablePanel.snapToModal"),children:jsx(DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),g||jsxs(Fragment,{children:[jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:f=>f.stopPropagation(),children:t}),jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:f=>f.stopPropagation(),children:jsx(Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Re,children:jsx(XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsx("div",{className:"flex-auto min-h-0 overflow-y-auto",children:i})]}),s==="left"&&jsx(zt,{isResizing:m,handleResizeStart:O})]})}function zt({isResizing:e,handleResizeStart:t}){return jsxs("div",{className:"relative",children:[jsxs("div",{className:"relative w-1 h-full cursor-ew-resize bg-border/80 hover:bg-border transition-colors duration-150 ease-in-out group flex flex-col items-center justify-center gap-1",children:[jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:t})]}),e&&jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function Co({contents:e=[],className:t,classNames:o,children:d}){let s=useAtomValue(Ue);useEffect(()=>{let n=getDefaultStore();e.forEach(i=>{n.set(Le(i.id),i.panelMinWidth??320),n.set(He(i.id),i.panelMaxWidth??440),n.set(Ye(i.id),i.modalMinWidth??504),n.set(Be(i.id),i.modalMaxWidth??window.innerWidth-40);});},[e]);let h=useMemo(()=>e.filter(n=>{let i=getDefaultStore();return s.left[n.id]?i.get(se(n.id))==="left":false}).sort((n,i)=>s.left[i.id]-s.left[n.id]),[e,s.left]),g=useMemo(()=>e.filter(n=>{let i=getDefaultStore();return s.right[n.id]?i.get(se(n.id))==="right":false}).sort((n,i)=>(s.right[n.id]??0)-(s.right[i.id]??0)),[e,s.right]);return jsxs(Fragment,{children:[jsxs("div",{className:clsx("w-full h-full flex flex-row overflow-hidden",t,o?.root),children:[jsx("div",{className:clsx("flex-none h-full flex flex-row",o?.left),children:h.map(n=>jsx(st,{...n,position:"left",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`left-${n.id}`))}),jsx("div",{className:clsx("flex-auto min-w-0 h-full",o?.content),children:d}),jsx("div",{className:clsx("flex-none h-full flex flex-row",o?.right),children:g.map(n=>jsx(st,{...n,position:"right",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`right-${n.id}`))})]}),e.map(n=>jsx(Rt,{...n,minWidth:n.modalMinWidth??504,maxWidth:n.modalMaxWidth??window.innerWidth-40},`modal-${n.id}`))]})}function $o(e){let{isOpen:t,onOpen:o,onClose:d}=fe(e),{isOpen:s,onOpen:h,onClose:g}=pe(e),n=useAtomValue(he(e)),i=useCallback(()=>{t||s||(n==="modal"?o():h({position:n}));},[t,s,n,o,h]),w=useCallback(()=>{t?d():s&&g();},[t,s,d,g]),R=useMemo(()=>t||s,[t,s]);return useMemo(()=>({isOpen:R,onOpen:i,onClose:w}),[R,i,w])}function Go({children:e,className:t}){return jsx("div",{className:clsx("max-sm:hidden flex-none w-full h-15 px-6 max-lg:px-4 gap-6 max-lg:gap-4 flex justify-between items-center border-b border-border bg-background",t),children:e})}function ti({children:e,className:t}){return jsx("div",{className:clsx("sm:hidden flex-none w-full h-11 px-2 flex justify-between items-center border-b border-border bg-background",t),children:e})}function ri({children:e,className:t}){return jsx("div",{className:clsx("sm:hidden flex-none w-full h-14 flex justify-evenly items-center border-t border-border bg-background",t),children:e})}function di({children:e,className:t}){return jsx("div",{className:clsx("flex flex-col w-full h-screen max-sm:h-dvh overflow-hidden bg-background",t),children:e})}function hi({className:e,children:t}){return jsx("div",{className:clsx("flex-auto w-full min-h-0",e),children:t})}function bi({href:e="/",icon:t,miniIcon:o,className:d}){let{t:s}=useTranslation();return jsxs(Link,{href:e,className:clsx("flex-none flex justify-center items-center",d),"aria-label":s("scaffold.home"),children:[jsx("div",{className:clsx("flex justify-center items-center",!!o&&"max-xl:hidden"),children:t}),o&&jsx("div",{className:"flex justify-center items-center xl:hidden",children:o})]})}function vi({href:e,title:t,active:o=false,className:d}){return jsx(Link,{"data-active":o,href:e,className:clsx("h-8 text-sm font-medium px-2 xl:px-3 data-[active=true]:text-primary hover:text-primary text-foreground hover:bg-primary-50 rounded-sm",d),"aria-label":t,children:t})}function ki({id:e,children:t}){let o=useEventEmitter(),{isOpen:d,onOpen:s,onClose:h,onOpenChange:g}=useDisclosure(),[n,i]=useState(void 0),[w,R]=useState(void 0);return useEffect(()=>{let m=({params:P,onResult:S})=>{i(P),R(S),s();};return o.on(`open_modal:${e}`,m),()=>{o.off(`open_modal:${e}`,m);}},[e,s,o]),useEffect(()=>{let m=()=>{h();};return o.on(`close_modal:${e}`,m),()=>{o.off(`close_modal:${e}`,m);}},[e,h,o]),t({params:n,isOpen:d,onClose:h,onOpenChange:g,onResult:w})}function $i(e){let t=useEventEmitter(),o=useCallback(s=>{t.emit(`open_modal:${e}`,s);},[e,t]),d=useCallback(()=>{t.emit(`close_modal:${e}`);},[e,t]);return {onOpen:o,onClose:d}}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.13");var Bn="0.1.13";export{ki as AsyncModal,Rt as DraggableModal,st as DraggablePanel,Co as DraggablePanelProvider,ri as Footer,Go as Header,vi as HeaderNavigation,bi as Logo,ti as MobileHeader,di as Page,hi as PageContent,$i as useAsyncModal,$o as useDraggableDisclosure,fe as useDraggableModalDisclosure,pe as useDraggablePanelDisclosure,Bn as version};//# sourceMappingURL=index.mjs.map
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|