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