@dynamix-layout/solid
Version:
A powerful SolidJS component for creating dynamic, resizable, and draggable layouts.
787 lines (786 loc) • 25.9 kB
JavaScript
import { template as F, spread as _, mergeProps as k, insert as R, memo as xe, effect as Pe, createComponent as N, use as We } from "solid-js/web";
import { DynamixLayoutCore as P, Node as C } from "@dynamix-layout/core";
import { splitProps as Ie, createMemo as ve, createSignal as Z, onMount as Le, onCleanup as _e, For as ee } from "solid-js";
var X = F("<div>"), ke = F("<div><div>"), Ae = F('<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>'), Be = F('<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><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>');
const Me = (n) => (() => {
var o = X();
return _(o, k(n, {
get class() {
return `DefaultWrapTabLabel ${n.class || ""}`;
},
get "data-state"() {
return n.active ? "active" : "inactive";
},
get style() {
return {
"align-self": "center",
padding: "4px 6px",
"box-sizing": "border-box",
"font-size": "14px",
"border-radius": "4px",
...n.style
};
}
}), !1, !0), R(o, () => n.children), o;
})(), je = (n) => (() => {
var o = X();
return _(o, k(n, {
get class() {
return `DefaultWrapTabBody hide-scrollbar ${n.class || ""}`;
},
get style() {
return {
"box-sizing": "border-box",
height: "100%",
width: "100%",
display: "grid",
overflow: "auto",
"scrollbar-width": "none",
"-ms-overflow-style": "none",
...n.style
};
}
}), !1, !0), R(o, () => n.children), o;
})(), Ue = (n) => (() => {
var o = X();
return _(o, k(n, {
get class() {
return `DefaultWrapTabHead hide-scrollbar ${n.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",
...n.style
};
}
}), !1, !0), R(o, () => n.children), o;
})(), Fe = (n) => (() => {
var o = X();
return _(o, k(n, {
get class() {
return `DefaultWrapTabPanel ${n.class || ""}`;
},
get style() {
return {
display: "grid",
"align-items": "center",
"place-items": "self-start",
"box-sizing": "border-box",
position: "absolute",
"border-radius": "8px",
...n.style
};
}
}), !1, !0), R(o, () => n.children), o;
})(), Xe = (n) => (() => {
var o = X();
return _(o, k(n, {
get class() {
return `DefaultHoverElement ${n.class || ""}`;
},
get style() {
return {
display: "flex",
"justify-content": "center",
"align-items": "center",
opacity: 0.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)",
...n.style
};
}
}), !1, !0), R(o, () => n.children), o;
})(), qe = (n) => (() => {
var o = ke(), m = o.firstChild;
return _(o, k(n, {
get class() {
return `DefaultSliderElement ${n.class || ""}`;
},
get style() {
return {
width: "100%",
height: "100%",
position: "absolute",
"box-sizing": "border-box",
"background-color": "white",
"z-index": 9,
cursor: "grab",
...n.style
};
}
}), !1, !0), m.style.setProperty("display", "flex"), m.style.setProperty("align-items", "center"), m.style.setProperty("gap", "4px"), m.style.setProperty("height", "100%"), R(m, (() => {
var y = xe(() => !n.direction);
return () => y() ? Ae() : (() => {
var d = Be();
return d.style.setProperty("transform", "rotate(90deg)"), d;
})();
})()), R(o, () => n.children, null), Pe((y) => (y = n.direction ? "column" : "row") != null ? m.style.setProperty("flex-direction", y) : m.style.removeProperty("flex-direction")), o;
})(), Ye = (n) => {
const [o, m] = Ie(n, ["area", "size", "gap", "class", "style", "children"]), y = ve(() => {
const d = o.size || {
h: "20%",
w: "6px"
}, E = o.gap || "0px", h = {};
return o.area === "left" ? (Object.assign(h, {
"border-top-right-radius": "16px",
"border-bottom-right-radius": "16px",
height: d.h,
left: E,
width: d.w
}), h.top = `calc(50% - ${d.h} / 2)`) : o.area === "top" ? (Object.assign(h, {
"border-bottom-left-radius": "16px",
"border-bottom-right-radius": "16px",
width: d.h,
top: E,
height: d.w
}), h.left = `calc(50% - ${d.h} / 2)`) : o.area === "right" ? (Object.assign(h, {
"border-top-left-radius": "16px",
"border-bottom-left-radius": "16px",
height: d.h,
right: E,
width: d.w
}), h.top = `calc(50% - ${d.h} / 2)`) : o.area === "bottom" && (Object.assign(h, {
"border-top-left-radius": "16px",
"border-top-right-radius": "16px",
width: d.h,
bottom: E,
height: d.w
}), h.left = `calc(50% - ${d.h} / 2)`), h;
});
return (() => {
var d = X();
return _(d, k(m, {
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,
...y()
};
}
}), !1, !0), R(d, () => o.children), d;
})();
}, Je = ({
tabOutput: n,
rootId: o,
layoutTree: m,
updateJSON: y,
dimensions: d,
tabHeadHeight: E,
enableTabbar: h,
bondWidth: se,
minTabHeight: le,
minTabWidth: M,
sliderUpdateTimeout: de,
windowResizeTimeout: te,
disableSliderTimeout: q,
disableResizeTimeout: Y
}) => {
const j = /* @__PURE__ */ new Map(), J = /* @__PURE__ */ new Map(), U = /* @__PURE__ */ new Map(), ne = /* @__PURE__ */ new Map(), z = { current: void 0 }, K = [], [re, ce] = Z(
m
), [ae, A] = Z(
/* @__PURE__ */ new Map()
), [ue, oe] = Z(
/* @__PURE__ */ new Map()
), [ge, H] = Z(!1);
let O = null;
const [fe, w] = Z(!1), i = {
src: void 0,
des: void 0,
area: void 0,
drag: !1
}, a = {
sliderId: void 0,
isSliding: !1
}, c = new P({
tabs: n.keys,
tree: re(),
minW: M,
minH: le,
bond: se,
uqid: o,
tabsIds: n.name
}), p = (r) => {
const e = new Map(r);
A(e);
}, me = (r) => {
const e = new Map(r);
oe(e);
}, G = () => {
C.cache.tabOpts.get().forEach((e, s) => {
const t = ne.get(s);
t && (t.style.width = `${e.nodDims.w}px`, t.style.height = h ? `${e.nodDims.h - E}px` : `${e.nodDims.h}px`, t.style.left = `${e.nodDims.x}px`, t.style.top = h ? `${e.nodDims.y + E}px` : `${e.nodDims.y}px`, t.style.display = e.nodOpen ? "block" : "none");
});
}, we = () => {
C.cache.bndOpts.get().forEach((e, s) => {
const t = J.get(s);
t && (t.style.width = `${e.nodDims.w}px`, t.style.height = `${e.nodDims.h}px`, t.style.left = `${e.nodDims.x}px`, t.style.top = `${e.nodDims.y}px`);
});
};
C.cache.nodOpts.onChange((r) => {
r.forEach((e, s) => {
const t = U.get(s);
t && (t.style.width = `${e.nodDims.w}px`, t.style.height = `${e.nodDims.h}px`, t.style.left = `${e.nodDims.x}px`, t.style.top = `${e.nodDims.y}px`);
const l = j.get(s);
l && h && (l.style.width = `${e.nodDims.w}px`, l.style.height = h ? `${E}px` : "0px", l.style.left = `${e.nodDims.x}px`, l.style.top = `${e.nodDims.y}px`);
});
}), C.cache.bndOpts.onChange((r) => {
r.forEach((e, s) => {
const t = J.get(s);
t && (t.style.width = `${e.nodDims.w}px`, t.style.height = `${e.nodDims.h}px`, t.style.left = `${e.nodDims.x}px`, t.style.top = `${e.nodDims.y}px`);
});
});
const ye = (r) => {
a.isSliding && (c.updateSlider(
a.sliderId,
{
x: r.clientX,
y: r.clientY
},
q,
de
), we(), G());
}, ie = (r) => {
if (!a.isSliding) return;
const e = r.currentTarget;
a.isSliding = !1, a.sliderId = void 0, y && y(P._root.toJSON()), e.releasePointerCapture(r.pointerId), e.removeEventListener("pointermove", ye), e.removeEventListener("pointerup", ie), e.removeEventListener("pointercancel", ie);
}, De = (r) => {
r.preventDefault();
const e = r.currentTarget;
a.isSliding = !0, a.sliderId = e.id, e.setPointerCapture(r.pointerId), e.addEventListener("pointermove", ye), e.addEventListener("pointerup", ie), e.addEventListener("pointercancel", ie);
}, f = {}, Te = (r, e, s) => {
if (!z.current || !i || !s)
return null;
i.des = s;
const t = s.getBoundingClientRect();
if (!t) return null;
const l = t.width, u = t.height, g = r - t.left, x = e - t.top;
let b, D, $, v, S;
g < l / 3 ? (b = "left", D = t.left, $ = t.top, v = l / 2, S = u) : g > 2 * l / 3 ? (b = "right", D = t.left + l / 2, $ = t.top, v = l / 2, S = u) : x < u / 3 ? (b = "top", D = t.left, $ = t.top, v = l, S = u / 2) : x > 2 * u / 3 ? (b = "bottom", D = t.left, $ = t.top + u / 2, v = l, S = u / 2) : (b = "contain", D = t.left + l * 0.1, $ = t.top + u * 0.1, v = l * 0.8, S = u * 0.8), (f.area !== b || f.left !== D || f.top !== $ || f.width !== v || f.height !== S) && (V(D, $, v, S, b), f.area = b, f.left = D, f.top = $, f.width = v, f.height = S), i.area = b;
}, Ee = (r) => {
r.preventDefault(), r.stopPropagation(), r.dataTransfer && (r.dataTransfer.dropEffect = "move");
const e = r.currentTarget, s = Array.from(
e.childNodes
), t = r.clientX, l = r.clientY;
if (!z.current || !i || s.length === 0)
return;
const u = s[0].parentElement;
if (!u) return;
const g = u.getBoundingClientRect(), x = s[0], b = s[s.length - 1], D = x.getBoundingClientRect(), $ = b.getBoundingClientRect();
let v = 6;
if (l < g.top || l > g.bottom) return;
if (t > $.right) {
const T = $.right + 1, W = $.top, I = v - 2, L = $.height, B = "right";
V(T, W, I, L, B), i.des = b, i.area = B;
return;
}
if (t < D.left) {
const T = D.left - v + 1, W = D.top, I = v - 2, L = D.height, B = "left";
V(T, W, I, L, B), i.des = x, i.area = B;
return;
}
let S = null, pe = 1 / 0, Q = !1, he = 0;
for (let T = 0; T < s.length; T++) {
const W = s[T].getBoundingClientRect(), I = W.left + W.width / 2, L = Math.abs(t - I);
L < pe && (pe = L, S = s[T], Q = t < I, he = T);
}
if (s.length > 1 && (Q && he > 0 || !Q && he < s.length - 1) && (v = s[1].getBoundingClientRect().left - D.right), S) {
const T = S.getBoundingClientRect(), W = Q ? T.left - v + 1 : T.right + 1, I = T.top, L = v - 2, B = T.height, be = Q ? "left" : "right";
V(W, I, L, B, be), i.des = S, i.area = be;
}
}, $e = (r) => {
r.preventDefault(), r.stopPropagation(), r.dataTransfer && (r.dataTransfer.dropEffect = "move");
const e = r.currentTarget.dataset.area, s = r.currentTarget.dataset.uid;
if (!e || !s || !z.current || !i)
return;
i.des = r.currentTarget, i.area = e;
const t = d();
let l = t.x, u = t.y, g = t.w, x = t.h;
e === "left" ? (l = t.x, u = t.y, g = t.w / 2, x = t.h) : e === "right" ? (l = t.x + t.w / 2, u = t.y, g = t.w / 2, x = t.h) : e === "top" ? (l = t.x, u = t.y, g = t.w, x = t.h / 2) : e === "bottom" && (l = t.x, u = t.y + t.h / 2, g = t.w, x = t.h / 2), V(l, u, g, x, e);
}, V = (r, e, s, t, l) => {
if (f.area !== l || f.left !== r || f.top !== e || f.width !== s || f.height !== t) {
const u = z.current;
if (u) {
const g = {};
for (let x = 0; x < u.style.length; x++) {
const b = u.style[x];
b && (g[b] = u.style.getPropertyValue(b));
}
Object.assign(u.style, g, {
left: `${r}px`,
top: `${e}px`,
width: `${s}px`,
height: `${t}px`,
display: "block",
"z-index": "100"
}), f.area = l, f.left = r, f.top = e, f.width = s, f.height = t;
}
}
}, Se = (r) => {
if (r.stopPropagation(), H(!0), document.body.style.cursor = "move", r.currentTarget) {
if (r.dataTransfer) {
r.dataTransfer.effectAllowed = "move";
const e = document.createElement("div");
e.style.width = "1px", e.style.height = "1px", e.style.backgroundColor = "transparent", e.style.position = "absolute", e.style.top = "-1000px", document.body.appendChild(e), r.dataTransfer.setDragImage(e, 0, 0), setTimeout(() => {
e.parentNode && e.parentNode.removeChild(e);
}, 0);
}
K.forEach((e) => {
e && (e.style.display = "block", e.style.zIndex = "99");
}), U.forEach((e) => {
e && (e.style.display = "block", e.style.zIndex = "95");
}), i.src = r.currentTarget, i.drag = !0;
}
}, Re = (r) => {
if (r.preventDefault(), r.stopPropagation(), document.body.style.cursor = "move", r.dataTransfer && (r.dataTransfer.dropEffect = "move"), !i?.src)
return;
const e = r.currentTarget, s = r.clientX, t = r.clientY;
O && cancelAnimationFrame(O), O = requestAnimationFrame(() => {
Te(s, t, e);
});
}, Ne = (r) => {
if (document.body.style.cursor = "default", K.forEach((e) => {
e && (e.style.display = "none", e.style.zIndex = "-1");
}), O && (cancelAnimationFrame(O), O = null), z.current && (z.current.style.display = "none", z.current.style.zIndex = "-1"), Object.assign(f, {}), i.drag = !1, !i?.src || !i?.des) {
i.area = void 0, i.src = void 0, i.des = void 0, H(!1);
return;
}
if (i.src === i.des) {
i.area = void 0, i.src = void 0, i.des = void 0, H(!1);
return;
}
if (i.src && i.des) {
if (!i.area) {
console.warn("No area specified for drag and drop"), H(!1);
return;
}
if (!c.updateTree(
i.src.dataset.uid,
i.des.dataset.uid,
i.area || "contain"
)) {
console.warn("Failed to update layout tree"), H(!1);
return;
}
requestAnimationFrame(() => {
p(C.cache.nodOpts.get()), me(C.cache.bndOpts.get()), G(), y && y(P._root.toJSON());
});
}
i.area = void 0, i.src = void 0, i.des = void 0, H(!1);
}, Ce = (r) => {
r.preventDefault(), r.stopPropagation(), r.dataTransfer && (r.dataTransfer.dropEffect = "move");
}, ze = (r) => {
r.preventDefault(), r.stopPropagation();
}, Oe = (r) => {
r.preventDefault(), r.stopPropagation(), r.dataTransfer && r.dataTransfer.getData("text/plain");
}, He = (r) => {
const e = r.currentTarget, s = e.dataset.uid;
if (!s) return;
const t = C.cache.mapElem.get(s);
if (!(t instanceof C)) {
console.warn(`Element with uid ${s} is not a Node instance`);
return;
}
if (!t || !t.host || !t.host.unId) {
console.warn(`Node with uid ${s} not found in mapNode`);
return;
}
if (t.host.open == t.name) {
console.warn(`Node ${t.name} is already open`);
return;
}
const l = C.cache.nodOpts.get().get(t.host.unId);
if (!l || l.nodOpen && t?.open)
return;
t.host.open = t.name, l.nodOpen = t.name, l.nodKids?.forEach((g) => {
g.nodOpen = g.nodName === t.name;
}), e?.parentElement?.childNodes?.forEach((g) => {
g instanceof HTMLDivElement && g.dataset.uid !== s ? g.dataset.state = "inactive" : g.dataset.state = "active";
}), G();
};
return Le(() => {
const r = (s) => {
c.updateDimension(
d(),
s,
te
), G();
};
r(!0);
const e = () => r(Y ?? !1);
window.addEventListener("resize", e), p(C.cache.nodOpts.get()), me(C.cache.bndOpts.get()), G(), y && y(P._root.toJSON()), _e(() => {
window.removeEventListener("resize", e), O && cancelAnimationFrame(O);
});
}), {
tabsets: ae,
sliders: ue,
tabsetsRef: j,
panelsRef: U,
tabsRef: ne,
slidersRef: J,
layoutJSON: re,
layoutInstance: c,
hoverElementRef: z,
rootSplitHoverEl: K,
dragging: ge,
isUpdating: fe,
setIsUpdating: w,
setDragging: H,
setTabsets: A,
setSliders: oe,
setLayoutJSON: ce,
onDragStart: Se,
onDragOver: Re,
onDragEnd: Ne,
onDragEnter: Ce,
onDragLeave: ze,
onDrop: Oe,
onPointerDown: De,
updateActiveTab: He,
handleRootSplit: $e,
handleNavbarDragOver: Ee
};
};
var Ke = F("<div>"), Ge = F('<div class="flex items-center justify-center h-full"><span class=text-gray-500>No content');
const Ve = (n) => {
const o = [], m = /* @__PURE__ */ new Map(), y = /* @__PURE__ */ new Map();
for (const [d, E] of n) {
const h = crypto.randomUUID();
o.push(d), m.set(d, {
uqid: h,
name: d,
node: E
}), y.set(d, h);
}
return {
keys: o,
maps: m,
name: y
};
}, tt = (n) => {
const o = ve(() => Ve(n.tabs));
let m;
const y = () => {
const w = m;
if (!w) return {
w: 0,
h: 0,
x: 0,
y: 0
};
const i = w.getBoundingClientRect(), a = n.pad || {
t: 0,
b: 0,
l: 0,
r: 0
};
return {
w: i.width - (a.l + a.r),
h: i.height - (a.t + a.b),
x: i.left + a.l,
y: i.top + a.t
};
}, {
tabsetsRef: d,
slidersRef: E,
sliders: h,
tabsets: se,
hoverElementRef: le,
onDragEnd: M,
onDragOver: de,
onDragStart: te,
onDragEnter: q,
onDragLeave: Y,
onDrop: j,
dragging: J,
panelsRef: U,
onPointerDown: ne,
handleNavbarDragOver: z,
updateActiveTab: K,
rootSplitHoverEl: re,
handleRootSplit: ce,
tabsRef: ae,
isUpdating: A
} = Je({
tabOutput: o(),
rootId: n.rootId || "dynamix-layout-root",
updateJSON: n.updateJSON,
enableTabbar: n.enableTabbar === void 0 ? !0 : n.enableTabbar,
layoutTree: n.layoutTree,
tabHeadHeight: n.tabHeadHeight || P._minH,
dimensions: y,
sliderUpdateTimeout: n.sliderUpdateTimeout || 2,
windowResizeTimeout: n.windowResizeTimeout || 2,
bondWidth: n.bondWidth || P._bond,
minTabHeight: n.minTabHeight || P._minH,
minTabWidth: n.minTabWidth || P._minW,
disableSliderTimeout: n.disableSliderTimeout === void 0 ? !0 : n.disableSliderTimeout,
disableResizeTimeout: n.disableResizeTimeout === void 0 ? !0 : n.disableResizeTimeout,
hoverElementStyles: n.hoverElementStyles
}), ue = n.WrapTabPanel || Fe, oe = n.WrapTabHead || Ue, ge = n.WrapTabLabel || Me, H = n.WrapTabBody || je, O = n.SliderElement || qe, fe = n.HoverElement || Xe;
return (() => {
var w = Ke(), i = m;
return typeof i == "function" ? We(i, w) : m = w, _(w, k({
get id() {
return n.rootId || "dynamix-layout-root";
}
}, n, {
get "data-testid"() {
return n.rootId || "dynamix-layout-root";
},
get class() {
return J() ? "is-dragging" : "";
},
get style() {
return {
position: "relative",
width: "100%",
height: "100%",
overflow: "hidden",
...n.style
};
}
}), !1, !0), R(w, N(ee, {
get each() {
return Array.from(se().values());
},
children: (a) => [N(ue, {
ref: (c) => {
const p = a.uidNode;
c ? U.set(p, c) : U.delete(p);
},
onDragEnd: M,
onDragOver: de,
onDragEnter: q,
onDragLeave: Y,
onDrop: j,
get "data-uid"() {
return a.uidNode;
},
get "data-type"() {
return a.typNode;
},
get class() {
return "hide-scrollbar DefaultWrapTabPanel " + (n.tabPanelElementClass || "");
},
get style() {
return {
position: "absolute",
...n.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(oe, {
get draggable() {
return !A();
},
get "data-uid"() {
return a.uidNode;
},
"data-type": "tabset",
onDragOver: z,
onDragStart: te,
onDragEnd: M,
onDragEnter: q,
onDragLeave: Y,
onDrop: j,
ref: (c) => {
const p = a.uidNode;
c ? d.set(p, c) : d.delete(p);
},
get class() {
return "hide-scrollbar " + (n.tabHeadElementClass || "");
},
get style() {
return {
...n.tabHeadElementStyles,
position: "absolute",
"z-index": 99,
width: `${a.nodDims.w}px`,
height: `${n.tabHeadHeight || P._minH}px`,
left: `${a.nodDims.x}px`,
top: `${a.nodDims.y}px`,
cursor: A() ? "wait" : "pointer"
};
},
get children() {
return N(ee, {
get each() {
return a.nodKids;
},
children: (c) => N(ge, {
get "data-uid"() {
return c.uidNode;
},
"data-type": "tab",
onDragStart: te,
onDragEnd: M,
get draggable() {
return !A();
},
get active() {
return !!c.nodOpen;
},
get class() {
return "hide-scrollbar " + (n.tabLabelElementClass || "");
},
get style() {
return {
cursor: A() ? "wait" : "pointer",
...n.tabLabelElementStyles
};
},
onClick: K,
get children() {
return xe(() => !!n.tabNames)() && n.tabNames.get(c.nodName) || c.nodName;
}
})
});
}
})]
}), null), R(w, N(ee, {
get each() {
return o().keys;
},
children: (a) => {
const c = o().maps.get(a)?.uqid;
return N(H, {
id: c,
draggable: !1,
"data-uid": c,
get class() {
return "hide-scrollbar " + (n.tabBodyElementClass || "");
},
get style() {
return {
position: "absolute",
"z-index": 90,
"overscroll-behavior": "contain",
...n.tabBodyElementStyles
};
},
ref: (p) => {
c && (p ? ae.set(c, p) : ae.delete(c));
},
get children() {
return o().maps.get(a)?.node || Ge();
}
});
}
}), null), R(w, N(ee, {
get each() {
return Array.from(h().values());
},
children: (a) => N(O, {
get id() {
return a.uidNode;
},
get "data-uid"() {
return a.uidNode;
},
get direction() {
return a.nodeDir;
},
onPointerDown: ne,
get class() {
return "hide-scrollbar " + (n.sliderElementClass || "");
},
ref: (c) => {
const p = a.uidNode;
c ? E.set(p, c) : E.delete(p);
},
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",
...n.sliderElementStyles
};
}
})
}), null), R(w, N(fe, {
get class() {
return "hide-scrollbar " + (n.hoverElementClass || "");
},
get style() {
return {
...n.hoverElementStyles
};
},
ref: (a) => le.current = a
}), null), R(w, N(ee, {
each: ["left", "right", "top", "bottom"],
children: (a, c) => N(Ye, {
onDragOver: ce,
onDragEnd: M,
onDragEnter: q,
onDragLeave: Y,
onDrop: j,
get "data-uid"() {
return n.rootId || "dynamix-layout-root";
},
"data-area": a,
get class() {
return "hide-scrollbar " + (n.RootSplitterHoverElClass || "");
},
ref: (p) => {
p && (re[c()] = p);
},
get style() {
return {
...n.RootSplitterHoverElStyles
};
},
area: a,
size: {
h: "25%",
w: "8px"
}
})
}), null), w;
})();
};
export {
Xe as DefaultHoverElement,
qe as DefaultSliderElement,
je as DefaultWrapTabBody,
Ue as DefaultWrapTabHead,
Me as DefaultWrapTabLabel,
Fe as DefaultWrapTabPanel,
tt as DynamixLayout,
Ye as RootSplitterHoverEl,
Ve as getTabOutput,
Je as useDynamixLayout
};