@dynamix-layout/solid 1.0.2 → 1.1.0
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/CHANGELOG.md +36 -0
- package/dist/index.cjs +1 -0
- package/dist/index.css +1 -1
- package/dist/index.es.js +566 -400
- package/dist/types/index.d.cts +220 -0
- package/dist/types/index.d.ts +220 -4
- package/package.json +22 -13
- package/dist/index.cjs.js +0 -1
- package/dist/types/components/Default.d.ts +0 -23
- package/dist/types/components/Layout.d.ts +0 -4
- package/dist/types/hooks/useLayout.d.ts +0 -39
- package/dist/types/types/index.d.ts +0 -100
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,41 @@
|
|
|
1
1
|
# @dynamix-layout/solid
|
|
2
2
|
|
|
3
|
+
## 1.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#83](https://github.com/xcode-studio/dynamix-layout/pull/83) [`034fb0a`](https://github.com/xcode-studio/dynamix-layout/commit/034fb0afced4a7a1b4ca033cbf73771780f520d4) Thanks [@akash-aman](https://github.com/akash-aman)! - Maximize and fold tabsets (UI), on by default:
|
|
8
|
+
|
|
9
|
+
- Hover toolbar at the end of every tab bar with Maximize/Restore and Fold/Unfold buttons (accessible labels and tooltips), like LeetCode.
|
|
10
|
+
- Folded tabsets in side-by-side rows show their tab bar as a rotated vertical strip with the toolbar at the bottom; in stacked rows they shrink to their tab bar.
|
|
11
|
+
- Double-click a tab bar to maximize/restore; Alt/Option + `+` maximizes and Alt/Option + `-` folds the last touched tabset.
|
|
12
|
+
- New props: `enableMaximize`, `enableCollapse`, `enableDoubleClickMaximize`, `keyboardShortcuts`, and `TabsetToolbar` to replace the toolbar.
|
|
13
|
+
- Starting a drag while maximized restores the layout first; locked bonds next to folded tabsets ignore the pointer.
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies [[`4f01ca4`](https://github.com/xcode-studio/dynamix-layout/commit/4f01ca47e0ec6c28e68b157b2b2bed1522b92d0f)]:
|
|
18
|
+
- @dynamix-layout/core@1.2.0
|
|
19
|
+
|
|
20
|
+
## 1.0.3
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- [#84](https://github.com/xcode-studio/dynamix-layout/pull/84) [`a8295a7`](https://github.com/xcode-studio/dynamix-layout/commit/a8295a790a99cbf522ca68acd8057b666b401de4) Thanks [@akash-aman](https://github.com/akash-aman)! - Packaging fixes for 1.x, and deprecation notes ahead of 2.0.
|
|
25
|
+
|
|
26
|
+
- **React 18 works.** The React bundle no longer inlines React 19's `react/jsx-runtime`, and the peer dependencies are `react` and `react-dom` `^18.0.0 || ^19.0.0` (the `react` peer was `^0.0.1`). The React package's unused IIFE/UMD builds are gone; they weren't reachable through `exports`.
|
|
27
|
+
- **Types resolve.** The published declarations of the React and Solid packages imported `../../../core/src`, a path that doesn't exist in the package, so core types were `any`. Each package now ships one self-contained declaration file, plus `index.d.cts` for CommonJS.
|
|
28
|
+
- **`require()` works.** The CommonJS builds were named `*.cjs.js` in `"type": "module"` packages, so Node loaded them as ESM. They're now `*.cjs`. Core's `browser` field, which pointed at an IIFE without exports, is removed.
|
|
29
|
+
- **Installs on Node 18 and later** (it required Node 22).
|
|
30
|
+
- **Solid:** `solid-js` is a peer dependency, so apps don't end up with two copies.
|
|
31
|
+
- **Docs:**
|
|
32
|
+
- The README now gives the correct stylesheet path, `@dynamix-layout/react/style.css` (`styles.css` also works).
|
|
33
|
+
- Repository links point to `xcode-studio/dynamix-layout`.
|
|
34
|
+
- **Deprecations:** the props and exports that 2.0 renames or removes are marked `@deprecated`, each naming its replacement and linking the migration guide. Behaviour is unchanged.
|
|
35
|
+
|
|
36
|
+
- Updated dependencies [[`a8295a7`](https://github.com/xcode-studio/dynamix-layout/commit/a8295a790a99cbf522ca68acd8057b666b401de4)]:
|
|
37
|
+
- @dynamix-layout/core@1.1.1
|
|
38
|
+
|
|
3
39
|
## 1.0.2
|
|
4
40
|
|
|
5
41
|
### Patch Changes
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("solid-js/web"),d=require("@dynamix-layout/core"),x=require("solid-js");var O=n.template("<div>"),He=n.template("<div><div style=display:flex;align-items:center;gap:4px;height:100%>"),Oe=n.template('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round class="lucide lucide-grip-vertical size-2.5"><circle cx=9 cy=12 r=1></circle><circle cx=9 cy=5 r=1></circle><circle cx=9 cy=19 r=1></circle><circle cx=15 cy=12 r=1></circle><circle cx=15 cy=5 r=1></circle><circle cx=15 cy=19 r=1>'),Ie=n.template('<svg xmlns=http://www.w3.org/2000/svg width=24 height=24 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round style=transform:rotate(90deg)><circle cx=9 cy=12 r=1></circle><circle cx=9 cy=5 r=1></circle><circle cx=9 cy=19 r=1></circle><circle cx=15 cy=12 r=1></circle><circle cx=15 cy=5 r=1></circle><circle cx=15 cy=19 r=1>'),_e=n.template('<svg xmlns=http://www.w3.org/2000/svg width=14 height=14 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path>'),We=n.template("<div class=DefaultTabsetToolbar>"),ue=n.template("<button type=button class=DefaultTabsetToolbarButton>");const me=e=>(()=>{var o=O();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabLabel ${e.class||""}`},get"data-state"(){return e.active?"active":"inactive"},get style(){return{"align-self":"center",padding:"4px 6px","box-sizing":"border-box","font-size":"14px","border-radius":"4px",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),fe=e=>(()=>{var o=O();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabBody hide-scrollbar ${e.class||""}`},get style(){return{"box-sizing":"border-box",height:"100%",width:"100%",display:"grid",overflow:"auto","scrollbar-width":"none","-ms-overflow-style":"none",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),be=e=>(()=>{var o=O();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabHead hide-scrollbar ${e.class||""}`},get style(){return{display:"grid","grid-auto-flow":"column","justify-content":"start","align-items":"center",gap:"6px","padding-left":"8px",width:"100%","box-sizing":"border-box",height:"100%","place-items":"self-start",overflow:"auto","background-color":"#dfdfdf","scrollbar-width":"none","-ms-overflow-style":"none",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),he=e=>(()=>{var o=O();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultWrapTabPanel ${e.class||""}`},get style(){return{display:"grid","align-items":"center","place-items":"self-start","box-sizing":"border-box",position:"absolute","border-radius":"8px",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),ve=e=>(()=>{var o=O();return n.spread(o,n.mergeProps(e,{get class(){return`DefaultHoverElement ${e.class||""}`},get style(){return{display:"flex","justify-content":"center","align-items":"center",opacity:.7,position:"absolute","box-sizing":"border-box","font-weight":"bold","pointer-events":"none","background-color":"rgba(0, 175, 249, 0.5)","border-radius":"10px",transition:"all 0.2s ease",border:"2px dashed rgb(0, 196, 42)",...e.style}}}),!1,!0),n.insert(o,()=>e.children),o})(),ye=e=>(()=>{var o=He(),v=o.firstChild;return n.spread(o,n.mergeProps(e,{get class(){return`DefaultSliderElement ${e.class||""}`},get style(){return{width:"100%",height:"100%",position:"absolute","box-sizing":"border-box","background-color":"white","z-index":9,cursor:"grab",...e.style}}}),!1,!0),n.insert(v,(()=>{var u=n.memo(()=>!e.direction);return()=>u()?Oe():Ie()})()),n.insert(o,()=>e.children,null),n.effect(u=>n.setStyleProperty(v,"flex-direction",e.direction?"column":"row")),o})(),pe=e=>{const[o,v]=x.splitProps(e,["area","size","gap","class","style","children"]),u=x.createMemo(()=>{const i=o.size||{h:"20%",w:"6px"},m=o.gap||"0px",g={};return o.area==="left"?(Object.assign(g,{"border-top-right-radius":"16px","border-bottom-right-radius":"16px",height:i.h,left:m,width:i.w}),g.top=`calc(50% - ${i.h} / 2)`):o.area==="top"?(Object.assign(g,{"border-bottom-left-radius":"16px","border-bottom-right-radius":"16px",width:i.h,top:m,height:i.w}),g.left=`calc(50% - ${i.h} / 2)`):o.area==="right"?(Object.assign(g,{"border-top-left-radius":"16px","border-bottom-left-radius":"16px",height:i.h,right:m,width:i.w}),g.top=`calc(50% - ${i.h} / 2)`):o.area==="bottom"&&(Object.assign(g,{"border-top-left-radius":"16px","border-top-right-radius":"16px",width:i.h,bottom:m,height:i.w}),g.left=`calc(50% - ${i.h} / 2)`),g});return(()=>{var i=O();return n.spread(i,n.mergeProps(v,{get class(){return`RootSplitterHoverEl ${o.class||""}`},get style(){return{position:"absolute","z-index":-1,display:"none","box-sizing":"border-box","background-color":"#0081f9",cursor:"grab",...o.style,...u()}}}),!1,!0),n.insert(i,()=>o.children),i})()},ge=e=>(()=>{var o=_e(),v=o.firstChild;return n.effect(u=>{var i=e.rotate?{transform:`rotate(${e.rotate}deg)`}:{},m=e.path;return u.e=n.style(o,i,u.e),m!==u.t&&n.setAttribute(v,"d",u.t=m),u},{e:void 0,t:void 0}),o})(),Ae="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3",Fe="M8 3v3a2 2 0 0 1-2 2H3M21 8h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3M16 21v-3a2 2 0 0 1 2-2h3",Be="m15 18-6-6 6-6",xe=e=>{const o=()=>(e.rowIsHorizontal?0:90)+(e.folded?180:0),v=()=>e.rotated?-90:0;let u;return x.onMount(()=>{const i=u?.parentElement;if(!u||!i)return;const m=()=>{u.style.transform=`translateX(${i.scrollLeft}px)`};m(),i.addEventListener("scroll",m,{passive:!0}),x.onCleanup(()=>i.removeEventListener("scroll",m))}),(()=>{var i=We();i.$$dblclick=g=>g.stopPropagation();var m=u;return typeof m=="function"?n.use(m,i):u=i,n.insert(i,(()=>{var g=n.memo(()=>!!e.showMaximize);return()=>g()&&(()=>{var p=ue();return p.$$click=()=>e.onToggleMaximize(),n.insert(p,n.createComponent(ge,{get path(){return e.maximized?Fe:Ae},get rotate(){return v()}})),n.effect(b=>{var T=e.maximized?"Restore":"Maximize",N=e.maximized,S=e.maximized?"Restore (⌥ +)":"Maximize (⌥ +)";return T!==b.e&&n.setAttribute(p,"aria-label",b.e=T),N!==b.t&&n.setAttribute(p,"aria-pressed",b.t=N),S!==b.a&&n.setAttribute(p,"title",b.a=S),b},{e:void 0,t:void 0,a:void 0}),p})()})(),null),n.insert(i,(()=>{var g=n.memo(()=>!!e.showFold);return()=>g()&&(()=>{var p=ue();return p.$$click=()=>e.onToggleFold(),n.insert(p,n.createComponent(ge,{path:Be,get rotate(){return o()+v()}})),n.effect(b=>{var T=e.folded?"Unfold":"Fold",N=!e.folded,S=e.folded?"Unfold (⌥ -)":"Fold (⌥ -)";return T!==b.e&&n.setAttribute(p,"aria-label",b.e=T),N!==b.t&&n.setAttribute(p,"aria-expanded",b.t=N),S!==b.a&&n.setAttribute(p,"title",b.a=S),b},{e:void 0,t:void 0,a:void 0}),p})()})(),null),i})()};n.delegateEvents(["dblclick","click"]);const we=({tabOutput:e,rootId:o,layoutTree:v,updateJSON:u,dimensions:i,tabHeadHeight:m,enableTabbar:g,bondWidth:p,minTabHeight:b,minTabWidth:T,sliderUpdateTimeout:N,windowResizeTimeout:S,disableSliderTimeout:I,disableResizeTimeout:_,keyboardShortcuts:W=!0,enableDoubleClickMaximize:Q=!0})=>{const A=new Map,X=new Map,F=new Map,V=new Map,E={current:void 0},B=[],[j,H]=x.createSignal(v),[ee,Y]=x.createSignal(new Map),[te,J]=x.createSignal(new Map),[re,C]=x.createSignal(!1);let $=null;const[ne,ae]=x.createSignal(!1),l={src:void 0,des:void 0,area:void 0,drag:!1},M={sliderId:void 0,isSliding:!1},Z=g?Math.max(b,m):b,z=new d.DynamixLayoutCore({tabs:e.keys,tree:j(),minW:T,minH:Z,bond:p,uqid:o,tabsIds:e.name,collapsedSize:g?m:Z}),q=t=>{const r=new Map(t);Y(r)},U=t=>{const r=new Map(t);J(r)},y=()=>{const t=g?m:0;d.Node.cache.tabOpts.get().forEach((r,c)=>{const s=V.get(c);if(!s)return;const f=d.getTabBodyRect(r.nodDims,t);d.setElementRect(s,f);const ce=r.nodOpen&&!r.nodFold&&!r.nodHidden&&f.h>0;s.style.display=ce?"block":"none"})},R=d.Node.cache.nodOpts.onChange(t=>{t.forEach((r,c)=>{const s=F.get(c);s&&d.setElementRect(s,r.nodDims);const f=A.get(c);f&&g&&(f.toggleAttribute("data-dx-hidden",!!r.nodHidden),d.placeTabbar(f,d.getTabbarPlacement(r,m)))})}),a=d.Node.cache.tabOpts.onChange(()=>y()),h=d.Node.cache.bndOpts.onChange(t=>{t.forEach((r,c)=>{const s=X.get(c);s&&(d.setElementRect(s,r.nodDims),s.toggleAttribute("data-dx-hidden",!!r.nodHidden),s.style.pointerEvents=r.nodLocked?"none":"")})}),w=d.createFrameScheduler(({id:t,point:r})=>z.updateSlider(t,r,I,N)),K=t=>{const r=M.sliderId;!M.isSliding||!r||w.schedule({id:r,point:{x:t.clientX,y:t.clientY}})},P=t=>{if(!M.isSliding)return;w.flush();const r=t.currentTarget;M.isSliding=!1,M.sliderId=void 0,C(!1),u&&u(d.DynamixLayoutCore._root.toJSON()),r.releasePointerCapture(t.pointerId),r.removeEventListener("pointermove",K),r.removeEventListener("pointerup",P),r.removeEventListener("pointercancel",P)},D=t=>{t.preventDefault();const r=t.currentTarget;M.isSliding=!0,M.sliderId=r.id,C(!0),r.setPointerCapture(t.pointerId),r.addEventListener("pointermove",K),r.addEventListener("pointerup",P),r.addEventListener("pointercancel",P)};let L={};const De=(t,r,c)=>{if(!E.current||!l||!c)return null;const s=d.getTabsetDropPreview(c.getBoundingClientRect(),t,r);G(s),l.des=c,l.area=s.area},Ee=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move");const r=t.currentTarget;if(r.hasAttribute("data-rotated")){if(!E.current||!l)return;const f=r.getBoundingClientRect();G({area:"contain",left:f.left,top:f.top,width:f.width,height:f.height}),l.des=r,l.area="contain";return}const c=Array.from(r.querySelectorAll(':scope > [data-type="tab"]'));if(!E.current||!l)return;const s=d.getNavbarDropPreview(r.getBoundingClientRect(),c.map(f=>f.getBoundingClientRect()),t.clientX,t.clientY);s&&(G(s),l.des=c[s.index],l.area=s.area)},Ce=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move");const r=t.currentTarget,{area:c,uid:s}=r.dataset;if(!c||!s||!E.current||!l)return;const f=c;l.des=r,l.area=f,G(d.getRootSplitPreview(i(),f))},G=t=>{const r=E.current;!r||d.isSameDropPreview(L,t)||(Object.assign(r.style,{left:`${t.left}px`,top:`${t.top}px`,width:`${t.width}px`,height:`${t.height}px`,display:"block",zIndex:"100"}),L=t)};let oe=null;const ie=()=>{q(d.Node.cache.nodOpts.get()),U(d.Node.cache.bndOpts.get()),y(),u&&u(d.DynamixLayoutCore._root.toJSON())},le=t=>{z.toggleMaximize(t)&&ie()},se=t=>{z.toggleCollapse(t)&&ie()},Se=t=>{const r=t.target.closest("[data-uid]"),c=r?.dataset.uid?d.Node.cache.mapElem.get(r.dataset.uid):void 0;c instanceof d.Node&&(c.type==="tabset"?oe=c.unId:c.type==="tab"&&c.host&&(oe=c.host.unId))},$e=t=>{const r=t.currentTarget.dataset.uid;Q&&r&&le(r)},de=t=>{if(!W||!t.altKey||t.ctrlKey||t.metaKey)return;const r=oe??z.maximizedId;r&&(t.code==="Equal"||t.code==="NumpadAdd"?(t.preventDefault(),le(r)):(t.code==="Minus"||t.code==="NumpadSubtract")&&(t.preventDefault(),se(r)))},ze=t=>{if(t.stopPropagation(),z.restore()&&ie(),C(!0),document.body.style.cursor="move",t.currentTarget){if(t.dataTransfer){t.dataTransfer.effectAllowed="move";const r=document.createElement("div");r.style.width="1px",r.style.height="1px",r.style.backgroundColor="transparent",r.style.position="absolute",r.style.top="-1000px",document.body.appendChild(r),t.dataTransfer.setDragImage(r,0,0),setTimeout(()=>{r.parentNode&&r.parentNode.removeChild(r)},0)}B.forEach(r=>{r&&(r.style.display="block",r.style.zIndex="99")}),F.forEach(r=>{r&&(r.style.display="block",r.style.zIndex="95")}),l.src=t.currentTarget,l.drag=!0}},Ne=t=>{if(t.preventDefault(),t.stopPropagation(),document.body.style.cursor="move",t.dataTransfer&&(t.dataTransfer.dropEffect="move"),!l?.src)return;const r=t.currentTarget,c=t.clientX,s=t.clientY;$&&cancelAnimationFrame($),$=requestAnimationFrame(()=>{De(c,s,r)})},Me=()=>{if(document.body.style.cursor="default",B.forEach(t=>{t&&(t.style.display="none",t.style.zIndex="-1")}),$&&(cancelAnimationFrame($),$=null),E.current&&(E.current.style.display="none",E.current.style.zIndex="-1"),L={},l.drag=!1,!l?.src||!l?.des){l.area=void 0,l.src=void 0,l.des=void 0,C(!1);return}if(l.src===l.des){l.area=void 0,l.src=void 0,l.des=void 0,C(!1);return}if(l.src&&l.des){if(!l.area){console.warn("No area specified for drag and drop"),C(!1);return}if(!z.updateTree(l.src.dataset.uid,l.des.dataset.uid,l.area||"contain")){console.warn("Failed to update layout tree"),C(!1);return}requestAnimationFrame(()=>{q(d.Node.cache.nodOpts.get()),U(d.Node.cache.bndOpts.get()),y(),u&&u(d.DynamixLayoutCore._root.toJSON())})}l.area=void 0,l.src=void 0,l.des=void 0,C(!1)},Re=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&(t.dataTransfer.dropEffect="move")},Le=t=>{t.preventDefault(),t.stopPropagation()},Pe=t=>{t.preventDefault(),t.stopPropagation(),t.dataTransfer&&t.dataTransfer.getData("text/plain")},ke=t=>{const r=t.currentTarget,c=r.dataset.uid;if(!c)return;const s=d.Node.cache.mapElem.get(c);if(!(s instanceof d.Node)){console.warn(`Element with uid ${c} is not a Node instance`);return}if(!s||!s.host||!s.host.unId){console.warn(`Node with uid ${c} not found in mapNode`);return}if(s.host.open==s.name){console.warn(`Node ${s.name} is already open`);return}const f=d.Node.cache.nodOpts.get().get(s.host.unId);if(!f||f.nodOpen&&s?.open)return;s.host.open=s.name,f.nodOpen=s.name,f.nodKids?.forEach(k=>{k.nodOpen=k.nodName===s.name}),r?.parentElement?.childNodes?.forEach(k=>{k instanceof HTMLDivElement&&k.dataset.uid!==c?k.dataset.state="inactive":k.dataset.state="active"}),y()};return x.onMount(()=>{const t=c=>{z.updateDimension(i(),c,S)};t(!0);const r=()=>t(_??!1);window.addEventListener("resize",r),window.addEventListener("keydown",de),q(d.Node.cache.nodOpts.get()),U(d.Node.cache.bndOpts.get()),y(),u&&u(d.DynamixLayoutCore._root.toJSON()),x.onCleanup(()=>{window.removeEventListener("resize",r),window.removeEventListener("keydown",de),R(),h(),a(),w.cancel(),$&&cancelAnimationFrame($)})}),{tabsets:ee,sliders:te,tabsetsRef:A,panelsRef:F,tabsRef:V,slidersRef:X,layoutJSON:j,layoutInstance:z,hoverElementRef:E,rootSplitHoverEl:B,dragging:re,isUpdating:ne,setIsUpdating:ae,setDragging:C,setTabsets:Y,setSliders:J,setLayoutJSON:H,onDragStart:ze,onDragOver:Ne,onDragEnd:Me,onDragEnter:Re,onDragLeave:Le,onDrop:Pe,onPointerDown:D,updateActiveTab:ke,handleRootSplit:Ce,handleNavbarDragOver:Ee,toggleMaximize:le,toggleCollapse:se,onRootPointerDown:Se,onTabbarDoubleClick:$e}};var je=n.template("<div>"),qe=n.template('<div class="flex items-center justify-center h-full"><span class=text-gray-500>No content');const Te=e=>{const o=[],v=new Map,u=new Map;for(const[i,m]of e){const g=crypto.randomUUID();o.push(i),v.set(i,{uqid:g,name:i,node:m}),u.set(i,g)}return{keys:o,maps:v,name:u}},Ue=e=>{const o=x.createMemo(()=>Te(e.tabs));let v;const u=()=>{const y=v;if(!y)return{w:0,h:0,x:0,y:0};const R=y.getBoundingClientRect(),a=e.pad||{t:0,b:0,l:0,r:0};return{w:R.width-(a.l+a.r),h:R.height-(a.t+a.b),x:R.left+a.l,y:R.top+a.t}},{tabsetsRef:i,slidersRef:m,sliders:g,tabsets:p,hoverElementRef:b,onDragEnd:T,onDragOver:N,onDragStart:S,onDragEnter:I,onDragLeave:_,onDrop:W,dragging:Q,panelsRef:A,onPointerDown:X,handleNavbarDragOver:F,updateActiveTab:V,rootSplitHoverEl:E,handleRootSplit:B,tabsRef:j,isUpdating:H,toggleMaximize:ee,toggleCollapse:Y,onRootPointerDown:te,onTabbarDoubleClick:J}=we({tabOutput:o(),rootId:e.rootId||"dynamix-layout-root",updateJSON:e.updateJSON,enableTabbar:e.enableTabbar===void 0?!0:e.enableTabbar,layoutTree:e.layoutTree,tabHeadHeight:e.tabHeadHeight||d.DynamixLayoutCore._minH,dimensions:u,sliderUpdateTimeout:e.sliderUpdateTimeout||2,windowResizeTimeout:e.windowResizeTimeout||2,bondWidth:e.bondWidth||d.DynamixLayoutCore._bond,minTabHeight:e.minTabHeight||d.DynamixLayoutCore._minH,minTabWidth:e.minTabWidth||d.DynamixLayoutCore._minW,disableSliderTimeout:e.disableSliderTimeout===void 0?!0:e.disableSliderTimeout,disableResizeTimeout:e.disableResizeTimeout===void 0?!0:e.disableResizeTimeout,hoverElementStyles:e.hoverElementStyles,keyboardShortcuts:e.keyboardShortcuts??!0,enableDoubleClickMaximize:e.enableDoubleClickMaximize??!0}),re=e.WrapTabPanel||he,C=e.WrapTabHead||be,$=e.WrapTabLabel||me,ne=e.WrapTabBody||fe,ae=e.SliderElement||ye,l=e.HoverElement||ve,M=e.TabsetToolbar||xe,Z=e.tabHeadHeight||d.DynamixLayoutCore._minH,z=e.enableTabbar??!0,q=e.enableMaximize??!0,U=(e.enableCollapse??!0)&&z;return(()=>{var y=je(),R=v;return typeof R=="function"?n.use(R,y):v=y,n.spread(y,n.mergeProps({get id(){return e.rootId||"dynamix-layout-root"}},e,{get"data-testid"(){return e.rootId||"dynamix-layout-root"},get class(){return Q()?"is-dragging":""},onPointerDown:te,get style(){return{position:"relative",width:"100%",height:"100%",overflow:"hidden",...e.style}}}),!1,!0),n.insert(y,n.createComponent(x.For,{get each(){return Array.from(p().values())},children:a=>{const h=d.getTabbarPlacement(a,Z),w=q&&!!a.nodMaximizable,K=U&&!!a.nodFoldable&&!a.nodMaxd,P=w||K;return[n.createComponent(re,{ref:D=>{const L=a.uidNode;D?A.set(L,D):A.delete(L)},onDragEnd:T,onDragOver:N,onDragEnter:I,onDragLeave:_,onDrop:W,get"data-uid"(){return a.uidNode},get"data-type"(){return a.typNode},get class(){return"hide-scrollbar DefaultWrapTabPanel "+(e.tabPanelElementClass||"")},get style(){return{position:"absolute",...e.tabPanelElementStyles,width:`${a.nodDims.w}px`,height:`${a.nodDims.h}px`,left:`${a.nodDims.x}px`,top:`${a.nodDims.y}px`,"background-color":"transparent"}}}),n.createComponent(C,{get draggable(){return!H()},get"data-uid"(){return a.uidNode},"data-type":"tabset","data-tabbar":"",get"data-folded"(){return a.nodFold?"":void 0},get"data-maximized"(){return a.nodMaxd?"":void 0},get"data-dx-hidden"(){return a.nodHidden?"":void 0},get"data-rotated"(){return h.rotated?"":void 0},onDblClick:J,onDragOver:F,onDragStart:S,onDragEnd:T,onDragEnter:I,onDragLeave:_,onDrop:W,ref:D=>{const L=a.uidNode;D?i.set(L,D):i.delete(L)},get class(){return"hide-scrollbar "+(e.tabHeadElementClass||"")},get style(){return{...e.tabHeadElementStyles,position:"absolute","z-index":99,width:`${h.rect.w}px`,height:`${h.rect.h}px`,left:`${h.rect.x}px`,top:`${h.rect.y}px`,"transform-origin":"0 0",...h.rotated?{transform:"rotate(90deg)"}:{},...P?{"padding-right":"64px"}:{},cursor:H()?"wait":"pointer"}},get children(){return[n.createComponent(x.For,{get each(){return a.nodKids},children:D=>n.createComponent($,{get"data-uid"(){return D.uidNode},"data-type":"tab",onDragStart:S,onDragEnd:T,get draggable(){return!H()},get active(){return!!D.nodOpen},get class(){return"hide-scrollbar "+(e.tabLabelElementClass||"")},get style(){return{cursor:H()?"wait":"pointer",...e.tabLabelElementStyles}},onClick:V,get children(){return n.memo(()=>!!e.tabNames)()&&e.tabNames.get(D.nodName)||D.nodName}})}),n.memo(()=>P&&n.createComponent(M,{get maximized(){return!!a.nodMaxd},get folded(){return!!a.nodFold},get rotated(){return h.rotated},get rowIsHorizontal(){return a.nodeDir===!1},showMaximize:w,showFold:K,onToggleMaximize:()=>ee(a.uidNode),onToggleFold:()=>Y(a.uidNode)}))]}})]}}),null),n.insert(y,n.createComponent(x.For,{get each(){return o().keys},children:a=>{const h=o().maps.get(a)?.uqid;return n.createComponent(ne,{id:h,draggable:!1,"data-uid":h,get class(){return"hide-scrollbar "+(e.tabBodyElementClass||"")},get style(){return{position:"absolute","z-index":90,"overscroll-behavior":"contain",...e.tabBodyElementStyles}},ref:w=>{h&&(w?j.set(h,w):j.delete(h))},get children(){return o().maps.get(a)?.node||qe()}})}}),null),n.insert(y,n.createComponent(x.For,{get each(){return Array.from(g().values())},children:a=>n.createComponent(ae,{get id(){return a.uidNode},get"data-uid"(){return a.uidNode},get"data-dx-hidden"(){return a.nodHidden?"":void 0},get direction(){return a.nodeDir},onPointerDown:X,get class(){return"hide-scrollbar "+(e.sliderElementClass||"")},ref:h=>{const w=a.uidNode;h?m.set(w,h):m.delete(w)},get style(){return{width:`${a.nodDims.w}px`,height:`${a.nodDims.h}px`,left:`${a.nodDims.x}px`,top:`${a.nodDims.y}px`,cursor:a.nodeDir?"ns-resize":"ew-resize",...a.nodLocked?{"pointer-events":"none"}:{},...e.sliderElementStyles}}})}),null),n.insert(y,n.createComponent(l,{get class(){return"hide-scrollbar "+(e.hoverElementClass||"")},get style(){return{...e.hoverElementStyles}},ref:a=>b.current=a}),null),n.insert(y,n.createComponent(x.For,{each:["left","right","top","bottom"],children:(a,h)=>n.createComponent(pe,{onDragOver:B,onDragEnd:T,onDragEnter:I,onDragLeave:_,onDrop:W,get"data-uid"(){return e.rootId||"dynamix-layout-root"},"data-area":a,get class(){return"hide-scrollbar "+(e.RootSplitterHoverElClass||"")},ref:w=>{w&&(E[h()]=w)},get style(){return{...e.RootSplitterHoverElStyles}},area:a,size:{h:"25%",w:"8px"}})}),null),y})()};exports.DefaultHoverElement=ve;exports.DefaultSliderElement=ye;exports.DefaultTabsetToolbar=xe;exports.DefaultWrapTabBody=fe;exports.DefaultWrapTabHead=be;exports.DefaultWrapTabLabel=me;exports.DefaultWrapTabPanel=he;exports.DynamixLayout=Ue;exports.RootSplitterHoverEl=pe;exports.getTabOutput=Te;exports.useDynamixLayout=we;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.DefaultWrapTabLabel[data-state=active]{background-color:#fff;font-family:Poppins,sans-serif}.DefaultWrapTabLabel[data-state=inactive]{background-color:#dfdfdf;font-family:Poppins,sans-serif}.hide-scrollbar::-webkit-scrollbar{display:none}.is-dragging .DefaultWrapTabBody>*{pointer-events:none}
|
|
1
|
+
.DefaultWrapTabLabel[data-state=active]{background-color:#fff;font-family:Poppins,sans-serif}.DefaultWrapTabLabel[data-state=inactive]{background-color:#dfdfdf;font-family:Poppins,sans-serif}.hide-scrollbar::-webkit-scrollbar{display:none}.is-dragging .DefaultWrapTabBody>*{pointer-events:none}.DefaultTabsetToolbar{position:absolute;top:0;right:6px;height:100%;display:flex;align-items:center;gap:2px;padding-left:6px;background:inherit;opacity:0;transition:opacity .15s ease}[data-tabbar]:hover .DefaultTabsetToolbar,[data-tabbar][data-folded] .DefaultTabsetToolbar,.DefaultTabsetToolbar:focus-within{opacity:1}@media(hover:none){.DefaultTabsetToolbar{opacity:1}}.DefaultTabsetToolbarButton{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer}.DefaultTabsetToolbarButton:hover,.DefaultTabsetToolbarButton:focus-visible{background-color:#00000014}[data-dx-hidden]{display:none!important}
|