@liberfi.io/ui-scaffold 0.1.8 → 0.1.10
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 -19
- package/dist/index.d.ts +1 -19
- 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 +6 -6
package/dist/index.d.mts
CHANGED
|
@@ -190,24 +190,6 @@ type HeaderNavigationProps = PropsWithChildren<{
|
|
|
190
190
|
}>;
|
|
191
191
|
declare function HeaderNavigation({ href, title, active, className, }: HeaderNavigationProps): react_jsx_runtime.JSX.Element;
|
|
192
192
|
|
|
193
|
-
type HorizontalScrollContainerProps = PropsWithChildren<{
|
|
194
|
-
/** the amount of pixels to scroll when the user clicks the arrow buttons. */
|
|
195
|
-
scrollAmount?: number;
|
|
196
|
-
/** custom styles */
|
|
197
|
-
className?: string;
|
|
198
|
-
classNames?: {
|
|
199
|
-
root?: string;
|
|
200
|
-
content?: string;
|
|
201
|
-
leftArrow?: string;
|
|
202
|
-
leftArrowButton?: string;
|
|
203
|
-
leftArrowIcon?: string;
|
|
204
|
-
rightArrow?: string;
|
|
205
|
-
rightArrowButton?: string;
|
|
206
|
-
rightArrowIcon?: string;
|
|
207
|
-
};
|
|
208
|
-
}>;
|
|
209
|
-
declare function HorizontalScrollContainer({ scrollAmount, className, classNames, children, }: HorizontalScrollContainerProps): react_jsx_runtime.JSX.Element;
|
|
210
|
-
|
|
211
193
|
type RenderAsyncModalProps<P = any, R = any> = {
|
|
212
194
|
/** custom parameters for the modal */
|
|
213
195
|
params?: P;
|
|
@@ -249,4 +231,4 @@ declare global {
|
|
|
249
231
|
}
|
|
250
232
|
declare const _default: "0.1.8";
|
|
251
233
|
|
|
252
|
-
export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps,
|
|
234
|
+
export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps, Logo, type LogoProps, MobileHeader, type MobileHeaderProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, Page, PageContent, type PageContentProps, type PageProps, type RenderAsyncModalProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useAsyncModal, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };
|
package/dist/index.d.ts
CHANGED
|
@@ -190,24 +190,6 @@ type HeaderNavigationProps = PropsWithChildren<{
|
|
|
190
190
|
}>;
|
|
191
191
|
declare function HeaderNavigation({ href, title, active, className, }: HeaderNavigationProps): react_jsx_runtime.JSX.Element;
|
|
192
192
|
|
|
193
|
-
type HorizontalScrollContainerProps = PropsWithChildren<{
|
|
194
|
-
/** the amount of pixels to scroll when the user clicks the arrow buttons. */
|
|
195
|
-
scrollAmount?: number;
|
|
196
|
-
/** custom styles */
|
|
197
|
-
className?: string;
|
|
198
|
-
classNames?: {
|
|
199
|
-
root?: string;
|
|
200
|
-
content?: string;
|
|
201
|
-
leftArrow?: string;
|
|
202
|
-
leftArrowButton?: string;
|
|
203
|
-
leftArrowIcon?: string;
|
|
204
|
-
rightArrow?: string;
|
|
205
|
-
rightArrowButton?: string;
|
|
206
|
-
rightArrowIcon?: string;
|
|
207
|
-
};
|
|
208
|
-
}>;
|
|
209
|
-
declare function HorizontalScrollContainer({ scrollAmount, className, classNames, children, }: HorizontalScrollContainerProps): react_jsx_runtime.JSX.Element;
|
|
210
|
-
|
|
211
193
|
type RenderAsyncModalProps<P = any, R = any> = {
|
|
212
194
|
/** custom parameters for the modal */
|
|
213
195
|
params?: P;
|
|
@@ -249,4 +231,4 @@ declare global {
|
|
|
249
231
|
}
|
|
250
232
|
declare const _default: "0.1.8";
|
|
251
233
|
|
|
252
|
-
export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps,
|
|
234
|
+
export { AsyncModal, type AsyncModalProps, type DraggableContentProps, DraggableModal, type DraggableModalProps, DraggablePanel, type DraggablePanelProps, DraggablePanelProvider, type DraggablePanelProviderProps, Footer, type FooterProps, Header, HeaderNavigation, type HeaderNavigationProps, type HeaderProps, Logo, type LogoProps, MobileHeader, type MobileHeaderProps, type OpenAsyncModalOptions, type OpenDraggableModalOptions, type OpenDraggablePanelOptions, Page, PageContent, type PageContentProps, type PageProps, type RenderAsyncModalProps, type UseAsyncModalReturnType, type UseDraggableDisclosureReturnType, type UseDraggableModalDisclosureReturnType, type UseDraggablePanelDisclosureReturnType, useAsyncModal, useDraggableDisclosure, useDraggableModalDisclosure, useDraggablePanelDisclosure, _default as version };
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
'use strict';var react=require('react'),reactDom=require('react-dom'),hooks=require('@liberfi.io/hooks'),i18n=require('@liberfi.io/i18n'),ui=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');var se=ui.atomFamily(e=>ui.atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Fe=ui.atomFamily(e=>ui.atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),He=ui.atomFamily(e=>ui.atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),ke=ui.atomFamily(e=>ui.atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),yt=ui.atomFamily(e=>ui.atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),Te=ui.atomFamily(e=>ui.atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),_e=ui.atomFamily(e=>ui.atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),$e=ui.atomFamily(e=>ui.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Xe=ui.atomFamily(e=>ui.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})),Be=ui.atomFamily(e=>ui.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})),Ue=ui.atomFamily(e=>ui.atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=ui.atomFamily(e=>ui.atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Ve=ui.atomFamily(e=>ui.atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),fe=ui.atomFamily(e=>ui.atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),je=ui.atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function pe(e){let[t,n]=ui.useAtom(yt(e)),[l,i]=ui.useAtom(Ue(e)),f=ui.useAtomValue($e(e)),m=ui.useAtomValue(Be(e)),o=ui.useSetAtom(_e(e)),r=ui.useSetAtom(Xe(e)),a=ui.useSetAtom(Te(e)),d=ui.useSetAtom(fe(e)),c=react.useCallback((z={})=>{let{shouldStartDragging:K,position:Q,size:de}=z;Q&&r(_=>({..._,...Q})),de&&o(_=>({..._,...de})),a(K??false),n(true),d("modal");},[n,r,o,a]),b=react.useCallback(()=>{n(false),l&&(o({...f}),r({...m}),i(false));},[l,f,m,i,n,o,r]);return react.useMemo(()=>({isOpen:t,onOpen:c,onClose:b}),[t,c,b])}function ge(e){let[t,n]=ui.useAtom(se(e)),l=ui.useSetAtom(Fe(e)),i=ui.useSetAtom(fe(e)),f=ui.useSetAtom(je),m=react.useCallback((d={})=>{let c=d.position??"left";l(d.width??320),n(c),i(c),f(({left:b,right:z})=>c==="left"?{left:{...b,[e]:Date.now()},right:z}:{left:b,right:{...z,[e]:Date.now()}});},[e,n,l]),o=react.useCallback(()=>{n("none");},[n]),r=react.useMemo(()=>t!=="none",[t]),a=react.useMemo(()=>t!=="none"?t:void 0,[t]);return react.useMemo(()=>({isOpen:r,position:a,onOpen:m,onClose:o}),[r,m,o])}var xo={width:200,height:48},Ie={width:typeof window<"u"?window.innerWidth-40:0,height:typeof window<"u"?window.innerHeight-40:0},yo={x:20,y:20},Dt=react.memo(function({id:t,title:n,minWidth:l=504,maxWidth:i=Ie.width,minHeight:f=200,maxHeight:m=Ie.height,leftSidebar:o,leftSidebarWidth:r=200,rightSidebar:a,rightSidebarWidth:d=200,aspectRatio:c,showHeader:b=true,header:z,headerHeight:K=44,children:Q}){let{t:de}=i18n.useTranslation(),{isOpen:_,onClose:Ce}=pe(t),{onOpen:Ke}=ge(t),[F,$]=ui.useAtom(Ue(t)),[p,Qe]=ui.useAtom(Xe(t)),[g,et]=ui.useAtom(_e(t)),[ce,ue]=ui.useAtom($e(t)),[ee,te]=ui.useAtom(Be(t)),[Re,Pe]=ui.useAtom(Te(t)),[S,oe]=react.useState(Re),[ze,x]=react.useState(false),[N,j]=react.useState(null),[ne,Z]=react.useState(null),[re,E]=react.useState(null),[me,J]=react.useState(null),X=react.useRef(null),Xt=ui.useAtomValue(He(t)),Bt=ui.useAtomValue(ke(t)),B=hooks.useValueRef(p),w=hooks.useCallbackRef(Qe),ie=hooks.useValueRef(g),I=hooks.useCallbackRef(et),Ut=hooks.useValueRef(r),Yt=hooks.useValueRef(!!o),Vt=hooks.useValueRef(d),jt=hooks.useValueRef(!!a),k=hooks.useValueRef(c),U=hooks.useValueRef(K),De=hooks.useValueRef(l),Oe=hooks.useValueRef(i),We=hooks.useValueRef(f),Se=hooks.useValueRef(m),Zt=hooks.useValueRef(S),ut=hooks.useValueRef(ne),tt=hooks.useValueRef(me),Jt=hooks.useCallbackRef(Ce),qt=hooks.useCallbackRef(Ke),Gt=hooks.useValueRef(Xt),Kt=hooks.useValueRef(Bt),Ne=react.useMemo(()=>g.width===Ie.width&&g.height===Ie.height,[g.width,g.height]);react.useEffect(()=>{(p.x<0||p.y<0)&&w({x:Math.max(0,p.x),y:Math.max(0,p.y)});let s=p.x+g.width,C=p.y+g.height;(s>window.innerWidth||C>window.innerHeight)&&w({x:Math.min(p.x,Math.max(0,window.innerWidth-g.width)),y:Math.min(p.y,Math.max(0,window.innerHeight-g.height))});},[t]),react.useEffect(()=>{if(_&&Re){oe(true);let s=q=>{w({x:q.clientX-g.width/2,y:q.clientY-20});},C=()=>{oe(false),Pe(false),document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",C);};return document.addEventListener("mousemove",s),document.addEventListener("mouseup",C),document.body.style.cursor="grabbing",()=>{document.removeEventListener("mousemove",s),document.removeEventListener("mouseup",C),document.body.style.cursor="";}}},[_,Re,Pe,g.width]);let T=(s,C,q)=>{Pe(false),oe(false),x(false),j(null),C==="drag"?oe(true):C==="resize"&&(j(q||null),x(true));let mt=s.clientX,ht=s.clientY,L=ie.current.width,H=ie.current.height,A={...B.current},ft=()=>{document.removeEventListener("mousemove",pt),document.removeEventListener("mouseup",gt),document.body.style.cursor="",oe(false),x(false),j(null),Z(null),X.current&&(clearTimeout(X.current),X.current=null),J(null),E(null);},pt=Le=>{if(C==="drag"){let Y=Le.clientX-mt,V=Le.clientY-ht,v=A.x+Y,h=A.y+V,he=Yt.current?Ut.current:0,Ee=12+he,D=jt.current?Vt.current:0,M=window.innerWidth-12-L-D,Ae=window.innerHeight-12-44,R=v<=Ee?"left":v>=M?"right":null;R!==ut.current&&Z(R),X.current&&R&&E(R),X.current&&(tt.current==="left"&&(v>Ee||R!=="left")||tt.current==="right"&&(v<M||R!=="right"))&&(clearTimeout(X.current),X.current=null,J(null),E(null)),!X.current&&R&&tt.current!==R&&(J(R),E(R),X.current=setTimeout(()=>{Zt.current&&ut.current===R?(ft(),Jt(),qt({position:R,width:Math.min(Math.max(ie.current.width,Gt.current),Kt.current)})):J(null);},350)),v=Math.min(Math.max(v,12+he),M),h=Math.min(Math.max(h,12),Ae),w({x:v,y:h});}else if(C==="resize"&&q){let Y=Le.clientX-mt,V=Le.clientY-ht,v=(h,he,Ee)=>{let D=Math.min(Math.max(h,De.current),Oe.current),M=Math.min(Math.max(he,We.current),Se.current);if(k.current){if(Ee==="width")M=Math.min(Math.max(h/k.current+U.current,We.current),Se.current),D=(M-U.current)*k.current;else if(Ee==="height")D=Math.min(Math.max((he-U.current)*k.current,De.current),Oe.current),M=D/k.current+U.current;else {let Ae=h/k.current+U.current,R=(he-U.current)*k.current,bt=Math.abs(Y),xt=Math.abs(V);if(bt>1.1*xt)M=Math.min(Math.max(Ae,We.current),Se.current),D=(M-U.current)*k.current;else if(xt>1.1*bt)D=Math.min(Math.max(R,De.current),Oe.current),M=D/k.current+U.current;else {let to=(M+Ae)/2;D=Math.min(Math.max((D+R)/2,De.current),Oe.current),M=Math.min(Math.max(to,We.current),Se.current),D=(M-U.current)*k.current;}}D=Math.min(Math.max(D,De.current),Oe.current),M=Math.min(Math.max(M,We.current),Se.current);}return {width:D,height:M}};switch(q){case "topLeft":{let h=v(L-Y,H-V,"both");I(h),w({x:A.x+(L-h.width),y:A.y+(H-h.height)});break}case "topRight":{let h=v(L+Y,H-V,"both");I(h),w({x:A.x,y:A.y+(H-h.height)});break}case "bottomLeft":{let h=v(L-Y,H+V,"both");I(h),w({x:A.x+(L-h.width),y:A.y});break}case "bottomRight":{I(v(L+Y,H+V,"both"));break}case "top":{let h=v(L,H-V,"height");I(h),w({x:A.x,y:A.y+(H-h.height)});break}case "bottom":{I(v(L,H+V,"height"));break}case "left":{let h=v(L-Y,H,"width");I(h),w({x:A.x+(L-h.width),y:A.y});break}case "right":{I(v(L+Y,H,"width"));break}}}},gt=()=>{(p.x<0||p.y<0)&&w({x:Math.max(0,p.x),y:Math.max(0,p.y)}),ft();};document.addEventListener("mousemove",pt),document.addEventListener("mouseup",gt);},Qt=react.useCallback(()=>{F?(I({...ce}),w({...ee}),$(false)):(Ne?w({...ee}):(ue({...g}),te({...p})),I({...xo}),$(true));},[F,Ne,g,p,ce,ee,$,ue,te]),eo=react.useCallback(()=>{Ne?(I({...ce}),w({...ee})):(F?$(false):(ue({...g}),te({...p})),I({...Ie}),w({...yo}));},[Ne,F,g,p,ce,ee,$,ue,te]);return react.useEffect(()=>{let s=utils.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 C=B.current.x+ie.current.width,q=B.current.y+ie.current.height;(C>window.innerWidth||q>window.innerHeight)&&w({x:Math.min(B.current.x,Math.max(0,window.innerWidth-ie.current.width)),y:Math.min(B.current.y,Math.max(0,window.innerHeight-ie.current.height))});},100);return window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s);}},[]),_?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(S||ze)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui.clsx("max-sm:hidden fixed inset-0 z-9999 bg-transparent w-full h-full select-none",S&&(me?"cursor-grabbing":"cursor-move"),!S&&{"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),jsxRuntime.jsx("div",{className:ui.clsx("max-sm:hidden fixed z-50 left-0 top-0",S?"will-change-transform":"will-change-auto",ze||S?"transition-none":"transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]"),style:{transform:`translate(${Math.round(p.x-(o?r:0))}px, ${Math.round(p.y)}px)`},children:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[o&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",S?"opacity-40 translate-x-4":"opacity-100 translate-x-0"),style:{width:r,height:F?40:g.height-8},children:o}),jsxRuntime.jsx("div",{className:ui.clsx("z-50 relative bg-content1 border border-border rounded-lg overflow-hidden",S?"opacity-80 shadow-md scale-102 blur-[0.5px]":"opacity-100 shadow-lg scale-100 blur-none"),style:{width:g.width,height:g.height,transition:ze||S?"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:jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full",re&&"animate-modal-shrink",re==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!F&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:s=>T(s,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:s=>T(s,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:s=>T(s,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:s=>T(s,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:s=>T(s,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:s=>T(s,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:s=>T(s,"resize","left")}),jsxRuntime.jsx("div",{className:"absolute right-0 top-3 bottom-3 w-1.5 cursor-e-resize z-20",onMouseDown:s=>T(s,"resize","right")})]}),b&&jsxRuntime.jsxs("div",{className:"relative border-b border-border/80 px-3 gap-4 flex items-center justify-between cursor-move select-none",onMouseDown:s=>T(s,"drag"),style:{height:K},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:de("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),z||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:s=>s.stopPropagation(),children:n}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:s=>s.stopPropagation(),children:[jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Qt,children:F?jsxRuntime.jsx(ui.RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:eo,children:Ne?jsxRuntime.jsx(ui.UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui.MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ce,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!F&&jsxRuntime.jsx("div",{className:b?"h-[calc(100%-44px)] overflow-x-hidden overflow-y-auto":"h-full overflow-x-hidden overflow-y-auto cursor-move",onMouseDown:b?void 0:s=>T(s,"drag"),children:Q})]})}),a&&jsxRuntime.jsx("div",{className:ui.clsx("relative mt-1 z-10 transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]",S?"opacity-40 -translate-x-4":"opacity-100 translate-x-0"),style:{width:d,height:F?40:g.height-8},children:a})]})})]}):null});function dt({id:e,title:t,maxWidth:n=440,minWidth:l=320,position:i,showHeader:f=true,header:m,headerHeight:o=44,children:r}){let{t:a}=i18n.useTranslation(),d=ui.useAtomValue(se(e)),[c,b]=react.useState(false),[z,K]=react.useState(false),[Q,de]=ui.useAtom(Fe(e)),{onOpen:_}=pe(e),{onClose:Ce}=ge(e),Ke=ui.useAtomValue(Ye(e)),F=ui.useAtomValue(Ve(e)),$=hooks.useValueRef(Q),p=hooks.useValueRef(n),Qe=hooks.useValueRef(l),g=hooks.useValueRef(i),et=hooks.useValueRef(c),ce=hooks.useValueRef(z),ue=hooks.useCallbackRef(de),ee=hooks.useCallbackRef(_),te=hooks.useCallbackRef(Ce),Re=hooks.useValueRef(Ke),Pe=hooks.useValueRef(F),S=x=>{x.preventDefault(),x.stopPropagation(),b(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=x.clientX,j=$.current,ne=re=>{if(!et.current)return;let E=re.clientX-N,me=g.current==="right"?j-E:j+E,J=Math.min(Math.max(me,Qe.current),p.current);ue(J);},Z=()=>{b(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",ne),document.removeEventListener("mouseup",Z);};document.addEventListener("mousemove",ne),document.addEventListener("mouseup",Z);},oe=x=>{if(x.target instanceof HTMLElement&&x.target.closest("button"))return;x.preventDefault(),K(true);let N=x.clientX,j=x.clientY,ne=()=>{document.removeEventListener("mousemove",Z),document.removeEventListener("mouseup",re),K(false);},Z=E=>{if(!ce.current)return;let me=Math.abs(E.clientX-N),J=Math.abs(E.clientY-j);(me>10||J>10)&&(ne(),te(),ee({shouldStartDragging:true,position:{x:E.clientX-$.current/2+20,y:E.clientY-20},size:{width:Math.min(Math.max($.current,Re.current),Pe.current)}}));},re=()=>{ne();};document.addEventListener("mousemove",Z),document.addEventListener("mouseup",re);},ze=()=>{te();};return d!==i?null:jsxRuntime.jsxs("div",{className:"max-sm:hidden flex-none flex flex-row overflow-hidden",children:[i==="right"&&jsxRuntime.jsx(Wt,{isResizing:c,handleResizeStart:S}),jsxRuntime.jsxs("div",{className:ui.clsx("flex flex-col min-h-0 overflow-hidden bg-content1",z?"opacity-80 scale-98 blur-[1px]":"opacity-100 scale-100 blur-none"),style:{width:`${Q}px`,transition:c||z?"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:[f&&jsxRuntime.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:oe,style:{height:o},children:[jsxRuntime.jsx(ui.StyledTooltip,{placement:"top",closeDelay:0,content:a("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),m||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:x=>x.stopPropagation(),children:t}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:x=>x.stopPropagation(),children:jsxRuntime.jsx(ui.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:ze,children:jsxRuntime.jsx(ui.XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsxRuntime.jsx("div",{className:"flex-auto min-h-0 overflow-y-auto",children:r})]}),i==="left"&&jsxRuntime.jsx(Wt,{isResizing:c,handleResizeStart:S})]})}function Wt({isResizing:e,handleResizeStart:t}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.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:[jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:t})]}),e&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function Bn({contents:e=[],className:t,classNames:n,children:l}){let i=ui.useAtomValue(je);react.useEffect(()=>{let o=ui.getDefaultStore();e.forEach(r=>{o.set(He(r.id),r.panelMinWidth??320),o.set(ke(r.id),r.panelMaxWidth??440),o.set(Ye(r.id),r.modalMinWidth??504),o.set(Ve(r.id),r.modalMaxWidth??window.innerWidth-40);});},[e]);let f=react.useMemo(()=>e.filter(o=>{let r=ui.getDefaultStore();return i.left[o.id]?r.get(se(o.id))==="left":false}).sort((o,r)=>i.left[r.id]-i.left[o.id]),[e,i.left]),m=react.useMemo(()=>e.filter(o=>{let r=ui.getDefaultStore();return i.right[o.id]?r.get(se(o.id))==="right":false}).sort((o,r)=>(i.right[o.id]??0)-(i.right[r.id]??0)),[e,i.right]);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:ui.clsx("w-full h-full flex flex-row overflow-hidden",t,n?.root),children:[jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",n?.left),children:f.map(o=>jsxRuntime.jsx(dt,{...o,position:"left",minWidth:o.panelMinWidth??320,maxWidth:o.panelMaxWidth??440},`left-${o.id}`))}),jsxRuntime.jsx("div",{className:ui.clsx("flex-auto min-w-0 h-full",n?.content),children:l}),jsxRuntime.jsx("div",{className:ui.clsx("flex-none h-full flex flex-row",n?.right),children:m.map(o=>jsxRuntime.jsx(dt,{...o,position:"right",minWidth:o.panelMinWidth??320,maxWidth:o.panelMaxWidth??440},`right-${o.id}`))})]}),e.map(o=>jsxRuntime.jsx(Dt,{...o,minWidth:o.modalMinWidth??504,maxWidth:o.modalMaxWidth??window.innerWidth-40},`modal-${o.id}`))]})}function Gn(e){let{isOpen:t,onOpen:n,onClose:l}=pe(e),{isOpen:i,onOpen:f,onClose:m}=ge(e),o=ui.useAtomValue(fe(e)),r=react.useCallback(()=>{t||i||(o==="modal"?n():f({position:o}));},[t,i,o,n,f]),a=react.useCallback(()=>{t?l():i&&m();},[t,i,l,m]),d=react.useMemo(()=>t||i,[t,i]);return react.useMemo(()=>({isOpen:d,onOpen:r,onClose:a}),[d,r,a])}function ar({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.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 ur({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.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 pr({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.clsx("sm:hidden flex-none w-full h-14 flex justify-evenly items-center border-t border-border bg-background",t),children:e})}function yr({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui.clsx("flex flex-col w-full h-screen max-sm:h-dvh overflow-hidden bg-background",t),children:e})}function Rr({className:e,children:t}){return jsxRuntime.jsx("div",{className:ui.clsx("flex-auto w-full min-h-0",e),children:t})}function Wr({href:e="/",icon:t,miniIcon:n,className:l}){let{t:i}=i18n.useTranslation();return jsxRuntime.jsxs(ui.Link,{href:e,className:ui.clsx("flex-none flex justify-center items-center",l),"aria-label":i("scaffold.home"),children:[jsxRuntime.jsx("div",{className:ui.clsx("flex justify-center items-center",!!n&&"max-xl:hidden"),children:t}),n&&jsxRuntime.jsx("div",{className:"flex justify-center items-center xl:hidden",children:n})]})}function Ir({href:e,title:t,active:n=false,className:l}){return jsxRuntime.jsx(ui.Link,{"data-active":n,href:e,className:ui.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",l),"aria-label":t,children:t})}function Ht({scrollAmount:e,dependencies:t=[]}){let n=react.useRef(null),[l,i]=react.useState(false),[f,m]=react.useState(false),o=react.useCallback(()=>{let a=n.current;if(!a)return;let{scrollLeft:d,scrollWidth:c,clientWidth:b}=a;i(d>0),m(d<c-b-1);},[]),r=react.useCallback(a=>{let d=n.current;if(!d)return;let c=a==="left"?-e:e;d.scrollBy({left:c,behavior:"smooth"});},[e]);return react.useEffect(()=>{let a=n.current;if(!a)return;o(),a.addEventListener("scroll",o);let d=new ResizeObserver(o);return d.observe(a),()=>{a.removeEventListener("scroll",o),d.disconnect();}},[o,...t]),{showLeftArrow:l,showRightArrow:f,scroll:r,containerRef:n}}function Gr({scrollAmount:e=150,className:t,classNames:n,children:l}){let{showLeftArrow:i,showRightArrow:f,scroll:m,containerRef:o}=Ht({scrollAmount:e,dependencies:[l]}),[r,a]=react.useState(false),d=react.useCallback(()=>{a(true);},[]),c=react.useCallback(()=>{a(false);},[]),b=react.useCallback(()=>{m("left");},[m]),z=react.useCallback(()=>{m("right");},[m]);return jsxRuntime.jsxs("div",{className:ui.clsx("relative flex",t,n?.root),onMouseEnter:d,onMouseLeave:c,children:[i&&jsxRuntime.jsx("div",{className:ui.clsx("absolute left-0 top-0 w-8 h-full z-40 bg-gradient-to-r from-background/60 to-transparent flex items-center pointer-events-none",n?.leftArrow),children:jsxRuntime.jsx(ui.StyledButton,{onPress:b,isIconOnly:true,disableRipple:true,disableAnimation:true,className:ui.clsx("absolute left-0 w-6 h-6 bg-transparent flex items-center justify-center text-foreground/40 hover:text-foreground transition-all duration-125 ease-in-out opacity-0",r&&"opacity-100 pointer-events-auto",n?.leftArrowButton),children:jsxRuntime.jsx(ui.ChevronLeftIcon,{width:18,height:18,className:n?.leftArrowIcon})})}),f&&jsxRuntime.jsx("div",{className:ui.clsx("absolute right-0 top-0 w-8 h-full z-40 bg-gradient-to-l from-background/60 to-transparent flex items-center justify-end pointer-events-none",n?.rightArrow),children:jsxRuntime.jsx(ui.StyledButton,{onPress:z,isIconOnly:true,disableRipple:true,disableAnimation:true,className:ui.clsx("absolute right-0 w-6 h-6 bg-transparent flex items-center justify-center text-foreground/40 hover:text-foreground transition-all duration-125 ease-in-out opacity-0",r&&"opacity-100 pointer-events-auto",n?.rightArrowButton),children:jsxRuntime.jsx(ui.ChevronRightIcon,{width:18,height:18,className:n?.rightArrowIcon})})}),jsxRuntime.jsx("div",{ref:o,className:ui.clsx("flex overflow-x-auto overflow-y-hidden no-scrollbar",n?.content),children:l})]})}function si({id:e,children:t}){let n=hooks.useEventEmitter(),{isOpen:l,onOpen:i,onClose:f,onOpenChange:m}=ui.useDisclosure(),[o,r]=react.useState(void 0),[a,d]=react.useState(void 0);return react.useEffect(()=>{let c=({params:b,onResult:z})=>{r(b),d(z),i();};return n.on(`open_modal:${e}`,c),()=>{n.off(`open_modal:${e}`,c);}},[e,i,n]),react.useEffect(()=>{let c=()=>{f();};return n.on(`close_modal:${e}`,c),()=>{n.off(`close_modal:${e}`,c);}},[e,f,n]),t({params:o,isOpen:l,onClose:f,onOpenChange:m,onResult:a})}function ci(e){let t=hooks.useEventEmitter(),n=react.useCallback(i=>{t.emit(`open_modal:${e}`,i);},[e,t]),l=react.useCallback(()=>{t.emit(`close_modal:${e}`);},[e,t]);return {onOpen:n,onClose:l}}typeof window<"u"&&(window.__LIBERFI_VERSION__=window.__LIBERFI_VERSION__||{},window.__LIBERFI_VERSION__["@liberfi.io/ui-scaffold"]="0.1.8");var nn="0.1.8";exports.AsyncModal=si;exports.DraggableModal=Dt;exports.DraggablePanel=dt;exports.DraggablePanelProvider=Bn;exports.Footer=pr;exports.Header=ar;exports.HeaderNavigation=Ir;exports.HorizontalScrollContainer=Gr;exports.Logo=Wr;exports.MobileHeader=ur;exports.Page=yr;exports.PageContent=Rr;exports.useAsyncModal=ci;exports.useDraggableDisclosure=Gn;exports.useDraggableModalDisclosure=pe;exports.useDraggablePanelDisclosure=ge;exports.version=nn;//# sourceMappingURL=index.js.map
|
|
1
|
+
'use strict';var react=require('react'),reactDom=require('react-dom'),hooks=require('@liberfi.io/hooks'),i18n=require('@liberfi.io/i18n'),ui$1=require('@liberfi.io/ui'),utils=require('@liberfi.io/utils'),jsxRuntime=require('react/jsx-runtime');var se=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelState.${e??"default"}`,"none",void 0,{getOnInit:true})),Fe=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelWidth.${e??"default"}`,350,void 0,{getOnInit:true})),Le=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelMinWidth.${e??"default"}`,320,void 0,{getOnInit:true})),He=ui$1.atomFamily(e=>ui$1.atomWithStorage(`panelMaxWidth.${e??"default"}`,440,void 0,{getOnInit:true})),gt=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalOpen.${e??"default"}`,false,void 0,{getOnInit:true})),ke=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalShouldStartDragging.${e??"default"}`,false,void 0,{getOnInit:true})),Te=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),Ae=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalRestoreSize.${e??"default"}`,{width:350,height:580},void 0,{getOnInit:true})),_e=ui$1.atomFamily(e=>ui$1.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=ui$1.atomFamily(e=>ui$1.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=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalMinimized.${e??"default"}`,false,void 0,{getOnInit:true})),Ye=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalMinWidth.${e??"default"}`,200,void 0,{getOnInit:true})),Be=ui$1.atomFamily(e=>ui$1.atomWithStorage(`modalMaxWidth.${e??"default"}`,typeof window<"u"?window.innerWidth-40:0,void 0,{getOnInit:true})),he=ui$1.atomFamily(e=>ui$1.atomWithStorage(`lastPanelType.${e??"default"}`,"modal",void 0,{getOnInit:true})),Ue=ui$1.atomWithStorage("panelOrders",{left:{},right:{}},void 0,{getOnInit:true});function fe(e){let[t,o]=ui$1.useAtom(gt(e)),[d,s]=ui$1.useAtom(Xe(e)),h=ui$1.useAtomValue(Ae(e)),g=ui$1.useAtomValue($e(e)),n=ui$1.useSetAtom(Te(e)),i=ui$1.useSetAtom(_e(e)),w=ui$1.useSetAtom(ke(e)),R=ui$1.useSetAtom(he(e)),m=react.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=react.useCallback(()=>{o(false),d&&(n({...h}),i({...g}),s(false));},[d,h,g,s,o,n,i]);return react.useMemo(()=>({isOpen:t,onOpen:m,onClose:P}),[t,m,P])}function pe(e){let[t,o]=ui$1.useAtom(se(e)),d=ui$1.useSetAtom(Fe(e)),s=ui$1.useSetAtom(he(e)),h=ui$1.useSetAtom(Ue),g=react.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=react.useCallback(()=>{o("none");},[o]),i=react.useMemo(()=>t!=="none",[t]),w=react.useMemo(()=>t!=="none"?t:void 0,[t]);return react.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=react.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}=i18n.useTranslation(),{isOpen:_,onClose:Ee}=fe(t),{onOpen:Je}=pe(t),[H,$]=ui$1.useAtom(Xe(t)),[u,qe]=ui$1.useAtom(_e(t)),[c,Ge]=ui$1.useAtom(Te(t)),[de,ue]=ui$1.useAtom(Ae(t)),[ee,te]=ui$1.useAtom($e(t)),[Me,ve]=ui$1.useAtom(ke(t)),[O,ne]=react.useState(Me),[Re,f]=react.useState(false),[N,Z]=react.useState(null),[oe,j]=react.useState(null),[ie,E]=react.useState(null),[ce,J]=react.useState(null),X=react.useRef(null),Lt=ui$1.useAtomValue(Le(t)),Ht=ui$1.useAtomValue(He(t)),Y=hooks.useValueRef(u),x=hooks.useCallbackRef(qe),re=hooks.useValueRef(c),I=hooks.useCallbackRef(Ge),kt=hooks.useValueRef(i),Tt=hooks.useValueRef(!!n),At=hooks.useValueRef(R),_t=hooks.useValueRef(!!w),T=hooks.useValueRef(m),B=hooks.useValueRef(K),Pe=hooks.useValueRef(d),ze=hooks.useValueRef(s),De=hooks.useValueRef(h),We=hooks.useValueRef(g),$t=hooks.useValueRef(O),lt=hooks.useValueRef(oe),Ke=hooks.useValueRef(ce),Xt=hooks.useCallbackRef(Ee),Yt=hooks.useCallbackRef(Je),Bt=hooks.useValueRef(Lt),Ut=hooks.useValueRef(Ht),Oe=react.useMemo(()=>c.width===Se.width&&c.height===Se.height,[c.width,c.height]);react.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]),react.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=react.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=react.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 react.useEffect(()=>{let r=utils.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);}},[]),_?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[(O||Re)&&reactDom.createPortal(jsxRuntime.jsx("div",{className:ui$1.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),jsxRuntime.jsx("div",{className:ui$1.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:jsxRuntime.jsxs("div",{className:"flex relative z-50",children:[n&&jsxRuntime.jsx("div",{className:ui$1.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}),jsxRuntime.jsx("div",{className:ui$1.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:jsxRuntime.jsxs("div",{className:ui$1.clsx("w-full h-full",ie&&"animate-modal-shrink",ie==="left"?"origin-left":"origin-right"),style:{contain:"paint"},children:[!H&&jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"absolute top-0 left-0 w-3 h-3 cursor-nw-resize z-20",onMouseDown:r=>A(r,"resize","topLeft")}),jsxRuntime.jsx("div",{className:"absolute top-0 right-0 w-3 h-3 cursor-ne-resize z-20",onMouseDown:r=>A(r,"resize","topRight")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-0 w-3 h-3 cursor-sw-resize z-20",onMouseDown:r=>A(r,"resize","bottomLeft")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 right-0 w-3 h-3 cursor-se-resize z-20",onMouseDown:r=>A(r,"resize","bottomRight")}),jsxRuntime.jsx("div",{className:"absolute top-0 left-3 right-3 h-1.5 cursor-n-resize z-20",onMouseDown:r=>A(r,"resize","top")}),jsxRuntime.jsx("div",{className:"absolute bottom-0 left-3 right-3 h-1.5 cursor-s-resize z-20",onMouseDown:r=>A(r,"resize","bottom")}),jsxRuntime.jsx("div",{className:"absolute left-0 top-3 bottom-3 w-1.5 cursor-w-resize z-20",onMouseDown:r=>A(r,"resize","left")}),jsxRuntime.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&&jsxRuntime.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:[jsxRuntime.jsx(ui$1.StyledTooltip,{placement:"top",closeDelay:0,content:le("scaffold.draggableModal.snapToEdge"),children:jsxRuntime.jsx(ui$1.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),S||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:r=>r.stopPropagation(),children:o}),jsxRuntime.jsxs("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:r=>r.stopPropagation(),children:[jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Vt,children:H?jsxRuntime.jsx(ui$1.RestoreWindowIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui$1.MinimizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Zt,children:Oe?jsxRuntime.jsx(ui$1.UnMaximizeIcon,{width:18,height:18,className:"text-neutral"}):jsxRuntime.jsx(ui$1.MaximizeIcon,{width:18,height:18,className:"text-neutral"})}),jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Ee,children:jsxRuntime.jsx(ui$1.XCloseIcon,{width:18,height:18,className:"text-neutral"})})]})]})]}),!H&&jsxRuntime.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&&jsxRuntime.jsx("div",{className:ui$1.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}=i18n.useTranslation(),R=ui$1.useAtomValue(se(e)),[m,P]=react.useState(false),[S,K]=react.useState(false),[Q,le]=ui$1.useAtom(Fe(e)),{onOpen:_}=fe(e),{onClose:Ee}=pe(e),Je=ui$1.useAtomValue(Ye(e)),H=ui$1.useAtomValue(Be(e)),$=hooks.useValueRef(Q),u=hooks.useValueRef(o),qe=hooks.useValueRef(d),c=hooks.useValueRef(s),Ge=hooks.useValueRef(m),de=hooks.useValueRef(S),ue=hooks.useCallbackRef(le),ee=hooks.useCallbackRef(_),te=hooks.useCallbackRef(Ee),Me=hooks.useValueRef(Je),ve=hooks.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:jsxRuntime.jsxs("div",{className:"max-sm:hidden flex-none flex flex-row overflow-hidden",children:[s==="right"&&jsxRuntime.jsx(zt,{isResizing:m,handleResizeStart:O}),jsxRuntime.jsxs("div",{className:ui$1.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&&jsxRuntime.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:[jsxRuntime.jsx(ui$1.StyledTooltip,{placement:"top",closeDelay:0,content:w("scaffold.draggablePanel.snapToModal"),children:jsxRuntime.jsx(ui$1.DraggableIcon,{className:"text-neutral absolute left-1/2 -translate-x-1/2 top-0"})}),g||jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx("div",{className:"min-w-0 flex-initial text-sm font-medium truncate cursor-auto",onMouseDown:f=>f.stopPropagation(),children:t}),jsxRuntime.jsx("div",{className:"flex-none flex items-center justify-end gap-1",onMouseDown:f=>f.stopPropagation(),children:jsxRuntime.jsx(ui$1.Button,{size:"sm",variant:"light",radius:"lg",isIconOnly:true,onPress:Re,children:jsxRuntime.jsx(ui$1.XCloseIcon,{width:18,height:18,className:"text-neutral"})})})]})]}),jsxRuntime.jsx("div",{className:"flex-auto min-h-0 overflow-y-auto",children:i})]}),s==="left"&&jsxRuntime.jsx(zt,{isResizing:m,handleResizeStart:O})]})}function zt({isResizing:e,handleResizeStart:t}){return jsxRuntime.jsxs("div",{className:"relative",children:[jsxRuntime.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:[jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("i",{className:"rounded-full w-0.5 h-0.5 bg-neutral"}),jsxRuntime.jsx("div",{className:"absolute inset-0 -left-1.5 -right-1.5 cursor-ew-resize",onMouseDown:t})]}),e&&jsxRuntime.jsx("div",{className:"fixed inset-0 z-50 cursor-ew-resize"})]})}function So({contents:e=[],className:t,classNames:o,children:d}){let s=ui$1.useAtomValue(Ue);react.useEffect(()=>{let n=ui$1.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=react.useMemo(()=>e.filter(n=>{let i=ui$1.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=react.useMemo(()=>e.filter(n=>{let i=ui$1.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 jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("div",{className:ui$1.clsx("w-full h-full flex flex-row overflow-hidden",t,o?.root),children:[jsxRuntime.jsx("div",{className:ui$1.clsx("flex-none h-full flex flex-row",o?.left),children:h.map(n=>jsxRuntime.jsx(st,{...n,position:"left",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`left-${n.id}`))}),jsxRuntime.jsx("div",{className:ui$1.clsx("flex-auto min-w-0 h-full",o?.content),children:d}),jsxRuntime.jsx("div",{className:ui$1.clsx("flex-none h-full flex flex-row",o?.right),children:g.map(n=>jsxRuntime.jsx(st,{...n,position:"right",minWidth:n.panelMinWidth??320,maxWidth:n.panelMaxWidth??440},`right-${n.id}`))})]}),e.map(n=>jsxRuntime.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=ui$1.useAtomValue(he(e)),i=react.useCallback(()=>{t||s||(n==="modal"?o():h({position:n}));},[t,s,n,o,h]),w=react.useCallback(()=>{t?d():s&&g();},[t,s,d,g]),R=react.useMemo(()=>t||s,[t,s]);return react.useMemo(()=>({isOpen:R,onOpen:i,onClose:w}),[R,i,w])}function jo({children:e,className:t}){return jsxRuntime.jsx("div",{className:ui$1.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 jsxRuntime.jsx("div",{className:ui$1.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 jsxRuntime.jsx("div",{className:ui$1.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 jsxRuntime.jsx("div",{className:ui$1.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 jsxRuntime.jsx("div",{className:ui$1.clsx("flex-auto w-full min-h-0",e),children:t})}function pi({href:e="/",icon:t,miniIcon:o,className:d}){let{t:s}=i18n.useTranslation();return jsxRuntime.jsxs(ui$1.Link,{href:e,className:ui$1.clsx("flex-none flex justify-center items-center",d),"aria-label":s("scaffold.home"),children:[jsxRuntime.jsx("div",{className:ui$1.clsx("flex justify-center items-center",!!o&&"max-xl:hidden"),children:t}),o&&jsxRuntime.jsx("div",{className:"flex justify-center items-center xl:hidden",children:o})]})}function yi({href:e,title:t,active:o=false,className:d}){return jsxRuntime.jsx(ui$1.Link,{"data-active":o,href:e,className:ui$1.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=hooks.useEventEmitter(),{isOpen:d,onOpen:s,onClose:h,onOpenChange:g}=ui$1.useDisclosure(),[n,i]=react.useState(void 0),[w,R]=react.useState(void 0);return react.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]),react.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=hooks.useEventEmitter(),o=react.useCallback(s=>{t.emit(`open_modal:${e}`,s);},[e,t]),d=react.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";exports.AsyncModal=Fi;exports.DraggableModal=Rt;exports.DraggablePanel=st;exports.DraggablePanelProvider=So;exports.Footer=ni;exports.Header=jo;exports.HeaderNavigation=yi;exports.Logo=pi;exports.MobileHeader=Ko;exports.Page=si;exports.PageContent=ui;exports.useAsyncModal=Ti;exports.useDraggableDisclosure=To;exports.useDraggableModalDisclosure=fe;exports.useDraggablePanelDisclosure=pe;exports.version=Bn;//# sourceMappingURL=index.js.map
|
|
2
2
|
//# sourceMappingURL=index.js.map
|