You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

drag-split-pane

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

drag-split-pane - npm Package Compare versions

Comparing version

0.0.2
to
0.0.3

543

dist/drag-split-pane.js

@@ -1,2 +0,2 @@

import { defineComponent as V, computed as M, ref as k, watch as re, onUnmounted as se, createElementBlock as P, openBlock as D, normalizeClass as W, withKeys as le, withModifiers as H, normalizeStyle as F, inject as L, useTemplateRef as U, unref as p, createElementVNode as $, toDisplayString as ee, createVNode as G, onMounted as N, Fragment as J, renderList as Q, createBlock as A, withCtx as ce, createTextVNode as de, createCommentVNode as j, nextTick as te, provide as Y, onBeforeUnmount as q, KeepAlive as ue, Teleport as pe, withDirectives as fe, renderSlot as ve, vShow as be } from "vue";
import { defineComponent as V, computed as M, ref as k, watch as re, onUnmounted as se, createElementBlock as P, openBlock as C, normalizeClass as W, withKeys as le, withModifiers as H, normalizeStyle as F, inject as L, useTemplateRef as U, unref as s, createElementVNode as $, toDisplayString as ee, createVNode as G, onMounted as N, Fragment as J, renderList as Q, createBlock as A, withCtx as ce, createTextVNode as de, createCommentVNode as j, nextTick as te, provide as Y, onBeforeUnmount as q, KeepAlive as ue, Teleport as pe, withDirectives as fe, renderSlot as ve, vShow as be } from "vue";
import { v4 as ne } from "uuid";

@@ -42,40 +42,40 @@ import { useResizeObserver as he } from "@vueuse/core";

};
var S = /* @__PURE__ */ ((t) => (t.Left = "Left", t.Right = "Right", t))(S || {}), T = /* @__PURE__ */ ((t) => (t.Top = "Top", t.Right = "Right", t.Bottom = "Bottom", t.Left = "Left", t.Middle = "Middle", t))(T || {});
const K = "dspRootPaneNode", Z = "dspPaneNode", oe = "dspLoadedPaneTab", X = "dspInstanceMap";
var y = /* @__PURE__ */ ((t) => (t.Vertical = "Vertical", t.Horizontal = "Horizontal", t))(y || {});
function ae(t, v) {
const n = [t];
for (; n.length > 0; ) {
const r = n.pop();
if (r.id === v)
return r;
n.push(...[...r.children].reverse());
var S = /* @__PURE__ */ ((n) => (n.Left = "Left", n.Right = "Right", n))(S || {}), T = /* @__PURE__ */ ((n) => (n.Top = "Top", n.Right = "Right", n.Bottom = "Bottom", n.Left = "Left", n.Middle = "Middle", n))(T || {});
const K = "dspRootPaneNode", Z = "dspPaneNode", ae = "dspLoadedPaneTab", X = "dspInstanceMap";
var D = /* @__PURE__ */ ((n) => (n.Vertical = "Vertical", n.Horizontal = "Horizontal", n))(D || {});
function oe(n, l) {
const t = [n];
for (; t.length > 0; ) {
const a = t.pop();
if (a.id === l)
return a;
t.push(...[...a.children].reverse());
}
throw new Error(`find paneNode failed::${v}`);
throw new Error(`find paneNode failed::${l}`);
}
const x = (t) => [...t.tabs.map((n) => ({
...n,
const x = (n) => [...n.tabs.map((t) => ({
...t,
// 保留原始 Tab 属性（type/id/filePath 或 type/id/url）
paneId: t.id,
paneId: n.id,
// 附加 paneId
activeTab: t.activeTab
activeTab: n.activeTab
// 附加当前节点的 activeTab 状态
})), ...t.children.flatMap((n) => x(n))], E = (t) => {
let v = 0;
for (; v < t.children.length; ) {
const n = t.children[v];
if (E(n)) {
const u = t.size.reduce((c, e) => c + e, 0), C = t.size.splice(v, 1)[0];
if (t.children.splice(v, 1), t.children.length > 0) {
const c = u - C;
t.size = t.children.map(() => c / t.children.length);
})), ...n.children.flatMap((t) => x(t))], E = (n) => {
let l = 0;
for (; l < n.children.length; ) {
const t = n.children[l];
if (E(t)) {
const v = n.size.reduce((d, e) => d + e, 0), y = n.size.splice(l, 1)[0];
if (n.children.splice(l, 1), n.children.length > 0) {
const d = v - y;
n.size = n.children.map(() => d / n.children.length);
}
} else
v++;
l++;
}
if (t.children.length === 1) {
const n = t.children[0], r = t.size[0];
t.tabs = [...n.tabs], t.activeTab = n.activeTab, t.direction = n.direction, t.children = [...n.children], t.size = n.children.length > 0 ? [...n.size] : [r], t.id = n.id, E(t);
if (n.children.length === 1) {
const t = n.children[0], a = n.size[0];
n.tabs = [...t.tabs], n.activeTab = t.activeTab, n.direction = t.direction, n.children = [...t.children], n.size = t.children.length > 0 ? [...t.size] : [a], n.id = t.id, E(n);
}
return t.tabs.length === 0 && t.children.length === 0;
return n.tabs.length === 0 && n.children.length === 0;
}, Te = /* @__PURE__ */ V({

@@ -88,31 +88,31 @@ __name: "ResizeLine",

emits: ["resize"],
setup(t, { emit: v }) {
const n = t, r = v, u = M(() => n.direction), C = M(() => n.position), c = k(!1);
setup(n, { emit: l }) {
const t = n, a = l, v = M(() => t.direction), y = M(() => t.position), d = k(!1);
let e = 0;
const h = (_) => {
c.value = !0, e = n.direction === "vertical" ? _.clientY : _.clientX, document.addEventListener("mousemove", l), document.addEventListener("mouseup", g), document.body.style.cursor = n.direction === "vertical" ? "row-resize" : "col-resize", document.body.style.userSelect = "none";
}, l = (_) => {
if (!c.value) return;
const m = n.direction === "vertical" ? _.clientY : _.clientX, f = m - e;
r(
const p = (m) => {
d.value = !0, e = t.direction === "vertical" ? m.clientY : m.clientX, document.addEventListener("mousemove", g), document.addEventListener("mouseup", b), document.body.style.cursor = t.direction === "vertical" ? "row-resize" : "col-resize", document.body.style.userSelect = "none";
}, g = (m) => {
if (!d.value) return;
const I = t.direction === "vertical" ? m.clientY : m.clientX, h = I - e;
a(
"resize",
n.direction === "vertical" ? f : f * (n.position === "left" ? 1 : -1)
), e = m;
}, g = () => {
c.value = !1, document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", g), document.body.style.cursor = "", document.body.style.userSelect = "";
t.direction === "vertical" ? h : h * (t.position === "left" ? 1 : -1)
), e = I;
}, b = () => {
d.value = !1, document.removeEventListener("mousemove", g), document.removeEventListener("mouseup", b), document.body.style.cursor = "", document.body.style.userSelect = "";
};
return re(c, (_) => {
document.onselectstart = () => !_;
return re(d, (m) => {
document.onselectstart = () => !m;
}), se(() => {
document.onselectstart = null, document.body.style.cursor = "";
}), (_, m) => (D(), P("div", {
class: W(["resize-handle", [u.value, C.value]]),
onMousedown: h
}), (m, I) => (C(), P("div", {
class: W(["resize-handle", [v.value, y.value]]),
onMousedown: p
}, null, 34));
}
}), O = (t, v) => {
const n = t.__vccOpts || t;
for (const [r, u] of v)
n[r] = u;
return n;
}), O = (n, l) => {
const t = n.__vccOpts || n;
for (const [a, v] of l)
t[a] = v;
return t;
}, _e = /* @__PURE__ */ O(Te, [["__scopeId", "data-v-e4381544"]]), ze = ["aria-label"], Ce = /* @__PURE__ */ V({

@@ -128,19 +128,19 @@ __name: "CloseBtn",

emits: ["click"],
setup(t, { emit: v }) {
const n = t, r = v, u = k(!1), C = (h) => typeof h == "number" ? `${h}px` : h, c = M(() => ({
"--icon-size": C(n.size),
"--icon-color": u.value ? n.hoverColor : n.color,
"--line-weight": C(n.lineWeight)
})), e = (h) => {
r("click", h);
setup(n, { emit: l }) {
const t = n, a = l, v = k(!1), y = (p) => typeof p == "number" ? `${p}px` : p, d = M(() => ({
"--icon-size": y(t.size),
"--icon-color": v.value ? t.hoverColor : t.color,
"--line-weight": y(t.lineWeight)
})), e = (p) => {
a("click", p);
};
return (h, l) => (D(), P("div", {
return (p, g) => (C(), P("div", {
class: "close-btn",
style: F(c.value),
style: F(d.value),
role: "button",
"aria-label": h.ariaLabel,
"aria-label": p.ariaLabel,
tabindex: "0",
onClick: H(e, ["stop"]),
onMouseenter: l[0] || (l[0] = (g) => u.value = !0),
onMouseleave: l[1] || (l[1] = (g) => u.value = !1),
onMouseenter: g[0] || (g[0] = (b) => v.value = !0),
onMouseleave: g[1] || (g[1] = (b) => v.value = !1),
onKeydown: le(e, ["enter"])

@@ -157,43 +157,42 @@ }, null, 44, ze));

},
emits: ["closeTab"],
setup(t, { emit: v }) {
const n = t, r = v, u = L(Z), C = L(K), c = L(X), e = M(() => n.tab.id === u.activeTab), h = k(!1), l = k(S.Left), g = U("tabItemRef"), _ = (s) => {
s.dataTransfer && s.dataTransfer.setData("application/json", JSON.stringify(n.tab));
}, m = (s) => {
h.value = !0, s.preventDefault(), s.dataTransfer && (s.dataTransfer.dropEffect = "move"), B(s);
}, f = () => {
h.value = !1;
}, z = (s) => {
var b;
if (s.preventDefault(), h.value = !1, s.dataTransfer) {
const i = (b = s.dataTransfer) == null ? void 0 : b.getData("application/json"), o = JSON.parse(i);
if (o.id === n.tab.id) return;
const a = x(C).find((R) => R.id === o.id);
if (!a) return;
const d = c.get(a.paneId);
d && d.closeTab(o.id);
const I = c.get(u.id);
I && I.insertTab(o, n.tab.id, l.value), E(C);
setup(n) {
const l = n, t = L(Z), a = L(K), v = L(X), y = M(() => l.tab.id === t.activeTab), d = k(!1), e = k(S.Left), p = U("tabItemRef"), g = (u) => {
u.dataTransfer && u.dataTransfer.setData("application/json", JSON.stringify(l.tab));
}, b = (u) => {
d.value = !0, u.preventDefault(), u.dataTransfer && (u.dataTransfer.dropEffect = "move"), h(u);
}, m = () => {
d.value = !1;
}, I = (u) => {
var _;
if (u.preventDefault(), d.value = !1, u.dataTransfer) {
const f = (_ = u.dataTransfer) == null ? void 0 : _.getData("application/json"), z = JSON.parse(f);
if (z.id === l.tab.id) return;
const o = x(a).find((c) => c.id === z.id);
if (!o) return;
const i = v.get(o.paneId);
i && i.closeTab(z.id);
const r = v.get(t.id);
r && r.insertTab(z, l.tab.id, e.value), E(a);
}
}, B = (s) => {
if (!g.value) return;
const b = g.value.getBoundingClientRect();
s.clientX - b.left < b.width / 2 ? l.value = S.Left : l.value = S.Right;
}, h = (u) => {
if (!p.value) return;
const _ = p.value.getBoundingClientRect();
u.clientX - _.left < _.width / 2 ? e.value = S.Left : e.value = S.Right;
};
return (s, b) => (D(), P("div", {
return (u, _) => (C(), P("div", {
ref_key: "tabItemRef",
ref: g,
ref: p,
class: W(["tab-item", [
h.value && l.value === p(S).Left ? "drop-left" : "",
h.value && l.value === p(S).Right ? "drop-right" : "",
e.value ? "active" : ""
d.value && e.value === s(S).Left ? "drop-left" : "",
d.value && e.value === s(S).Right ? "drop-right" : "",
y.value ? "active" : ""
]]),
draggable: "true",
onDragstart: H(_, ["stop"]),
onDragleave: H(f, ["stop"]),
onDragover: H(m, ["stop"]),
onDrop: H(z, ["stop"]),
onClick: b[1] || (b[1] = H(
onDragstart: H(g, ["stop"]),
onDragleave: H(m, ["stop"]),
onDragover: H(b, ["stop"]),
onDrop: H(I, ["stop"]),
onClick: _[1] || (_[1] = H(
() => {
p(u).activeTab = t.tab.id;
s(t).activeTab = n.tab.id;
},

@@ -203,8 +202,9 @@ ["stop"]

}, [
$("div", ye, ee(t.tab.id), 1),
$("div", ye, ee(n.tab.id), 1),
$("div", Ie, [
G(De, {
onClick: b[0] || (b[0] = H(
onClick: _[0] || (_[0] = H(
() => {
r("closeTab", t.tab.id);
const f = s(v).get(s(t).id);
f && f.closeTab(n.tab.id), s(E)(s(a));
},

@@ -217,47 +217,45 @@ ["stop"]

}
}), Be = /* @__PURE__ */ O(Re, [["__scopeId", "data-v-294a36db"]]), Pe = /* @__PURE__ */ V({
}), Be = /* @__PURE__ */ O(Re, [["__scopeId", "data-v-ba6329dd"]]), Pe = /* @__PURE__ */ V({
__name: "TabHeaders",
emits: ["closeTab"],
setup(t, { emit: v }) {
const n = v, r = L(K), u = L(Z), C = L(X), c = U("tabHeaderWrapperRef");
setup(n) {
const l = L(K), t = L(Z), a = L(X), v = U("tabHeaderWrapperRef");
N(() => {
c.value && c.value.addEventListener("wheel", (l) => {
c.value && (l.preventDefault(), c.value.scrollLeft += l.deltaY);
v.value && v.value.addEventListener("wheel", (e) => {
v.value && (e.preventDefault(), v.value.scrollLeft += e.deltaY);
});
});
const e = (l) => {
l.preventDefault(), l.dataTransfer && (l.dataTransfer.dropEffect = "move");
}, h = (l) => {
var g;
if (l.preventDefault(), l.dataTransfer) {
const _ = (g = l.dataTransfer) == null ? void 0 : g.getData("application/json"), m = JSON.parse(_);
if (u.tabs.length > 0 && m.id === u.tabs[u.tabs.length - 1].id)
const y = (e) => {
e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = "move");
}, d = (e) => {
var p;
if (e.preventDefault(), e.dataTransfer) {
const g = (p = e.dataTransfer) == null ? void 0 : p.getData("application/json"), b = JSON.parse(g);
if (t.tabs.length > 0 && b.id === t.tabs[t.tabs.length - 1].id)
return;
if (u.tabs.find((f) => f.id === m.id)) {
u.activeTab = m.id;
const f = u.tabs.findIndex((z) => z.id === m.id);
u.tabs.splice(f, 1), u.tabs.push(m);
if (t.tabs.find((m) => m.id === b.id)) {
t.activeTab = b.id;
const m = t.tabs.findIndex((I) => I.id === b.id);
t.tabs.splice(m, 1), t.tabs.push(b);
} else {
const f = x(r).find((B) => B.id === m.id);
if (!f) return;
const z = C.get(f.paneId);
if (!z) return;
z.closeTab(m.id), u.activeTab = m.id, u.tabs.push(m), E(r);
const m = x(l).find((h) => h.id === b.id);
if (!m) return;
const I = a.get(m.paneId);
if (!I) return;
I.closeTab(b.id), t.activeTab = b.id, t.tabs.push(b), E(l);
}
}
};
return (l, g) => (D(), P("div", {
return (e, p) => (C(), P("div", {
ref_key: "tabHeaderWrapperRef",
ref: c,
ref: v,
class: "tab-header-wrapper",
onDragover: e,
onDrop: h
onDragover: y,
onDrop: d
}, [
(D(!0), P(J, null, Q(p(u).tabs, (_) => (D(), A(Be, {
key: _.id,
tab: _,
onCloseTab: g[0] || (g[0] = (m) => n("closeTab", m))
(C(!0), P(J, null, Q(s(t).tabs, (g) => (C(), A(Be, {
key: g.id,
tab: g
}, {
default: ce(() => [
de(ee(_.id), 1)
de(ee(g.id), 1)
]),

@@ -268,39 +266,39 @@ _: 2

}
}), Le = /* @__PURE__ */ O(Pe, [["__scopeId", "data-v-d8986ecd"]]), we = ["id"], Se = /* @__PURE__ */ V({
}), Le = /* @__PURE__ */ O(Pe, [["__scopeId", "data-v-a87c4340"]]), we = ["id"], Se = /* @__PURE__ */ V({
__name: "TabContent",
setup(t) {
const v = L(X), n = L(K), r = L(Z), u = L(oe), C = k(!1), c = k(y.Horizontal), e = k(T.Left), h = U("tabContentRef"), l = (f) => {
C.value = !0, f.preventDefault(), f.dataTransfer && (f.dataTransfer.dropEffect = "move"), m(f);
}, g = () => {
C.value = !1;
}, _ = async (f) => {
var z;
if (f.preventDefault(), C.value = !1, f.dataTransfer) {
const B = (z = f.dataTransfer) == null ? void 0 : z.getData("application/json"), s = JSON.parse(B);
setup(n) {
const l = L(X), t = L(K), a = L(Z), v = L(ae), y = k(!1), d = k(D.Horizontal), e = k(T.Left), p = U("tabContentRef"), g = (h) => {
y.value = !0, h.preventDefault(), h.dataTransfer && (h.dataTransfer.dropEffect = "move"), I(h);
}, b = () => {
y.value = !1;
}, m = async (h) => {
var u;
if (h.preventDefault(), y.value = !1, h.dataTransfer) {
const _ = (u = h.dataTransfer) == null ? void 0 : u.getData("application/json"), f = JSON.parse(_);
if (e.value === T.Middle) {
if (s.id === r.activeTab)
if (f.id === a.activeTab)
return;
if (r.tabs.find((a) => a.id === s.id)) {
r.activeTab = s.id;
if (a.tabs.find((r) => r.id === f.id)) {
a.activeTab = f.id;
return;
}
const b = x(n).find((a) => a.id === s.id);
if (!b) return;
const i = v.get(b.paneId);
i && i.closeTab(s.id), await te();
const o = v.get(r.id);
o && o.insertTab(s, r.activeTab, S.Right);
const z = x(t).find((r) => r.id === f.id);
if (!z) return;
const o = l.get(z.paneId);
o && o.closeTab(f.id), await te();
const i = l.get(a.id);
i && i.insertTab(f, a.activeTab, S.Right);
} else {
const b = x(n).find((d) => d.id === s.id);
if (!b || ae(n, b.paneId).tabs.length === 1 && r.activeTab === s.id)
const z = x(t).find((c) => c.id === f.id);
if (!z || oe(t, z.paneId).tabs.length === 1 && a.activeTab === f.id)
return;
const o = v.get(b.paneId);
o && o.closeTab(s.id), await te();
const a = v.get(r.id);
a && (a.insertPane(
const i = l.get(z.paneId);
i && i.closeTab(f.id), await te();
const r = l.get(a.id);
r && (r.insertPane(
{
id: ne(),
tabs: [s],
activeTab: s.id,
direction: y.Horizontal,
tabs: [f],
activeTab: f.id,
direction: D.Horizontal,
children: [],

@@ -310,39 +308,39 @@ size: []

e.value
), a.doLayoutChildrenPane());
), r.doLayoutChildrenPane());
}
E(n);
E(t);
}
};
N(() => {
u.push(r.id);
v.push(a.id);
});
const m = (f) => {
if (!h.value) return;
const z = h.value.getBoundingClientRect(), B = z.width, s = z.height, b = f.clientX - z.left, i = f.clientY - z.top, o = 0.2, a = b < B * o, d = b > B * (1 - o), I = i < s * o, R = i > s * (1 - o);
if (I ? (e.value = T.Top, c.value = y.Vertical) : R ? (e.value = T.Bottom, c.value = y.Vertical) : a ? (e.value = T.Left, c.value = y.Horizontal) : d ? (e.value = T.Right, c.value = y.Horizontal) : e.value = T.Middle, (I || R) && (a || d)) {
const w = Math.min(i, s - i), ie = Math.min(b, B - b);
w < ie ? (c.value = y.Horizontal, e.value = I ? T.Top : T.Bottom) : (c.value = y.Vertical, e.value = a ? T.Left : T.Right);
const I = (h) => {
if (!p.value) return;
const u = p.value.getBoundingClientRect(), _ = u.width, f = u.height, z = h.clientX - u.left, o = h.clientY - u.top, i = 0.2, r = z < _ * i, c = z > _ * (1 - i), B = o < f * i, R = o > f * (1 - i);
if (B ? (e.value = T.Top, d.value = D.Vertical) : R ? (e.value = T.Bottom, d.value = D.Vertical) : r ? (e.value = T.Left, d.value = D.Horizontal) : c ? (e.value = T.Right, d.value = D.Horizontal) : e.value = T.Middle, (B || R) && (r || c)) {
const w = Math.min(o, f - o), ie = Math.min(z, _ - z);
w < ie ? (d.value = D.Horizontal, e.value = B ? T.Top : T.Bottom) : (d.value = D.Vertical, e.value = r ? T.Left : T.Right);
}
};
return (f, z) => (D(), P("div", {
return (h, u) => (C(), P("div", {
ref_key: "tabContentRef",
ref: h,
ref: p,
class: "tabs-content",
onDragover: l,
onDragleave: g,
onDrop: _
onDragover: g,
onDragleave: b,
onDrop: m
}, [
C.value ? (D(), P("div", {
y.value ? (C(), P("div", {
key: 0,
class: W(["split-indicator", {
top: e.value === p(T).Top,
bottom: e.value === p(T).Bottom,
left: e.value === p(T).Left,
right: e.value === p(T).Right,
middle: e.value === p(T).Middle
top: e.value === s(T).Top,
bottom: e.value === s(T).Bottom,
left: e.value === s(T).Left,
right: e.value === s(T).Right,
middle: e.value === s(T).Middle
}])
}, null, 2)) : j("", !0),
$("div", null, ee(p(r).id), 1),
$("div", null, ee(s(a).id), 1),
$("div", {
id: `tabContent_${p(r).id}`,
id: `tabContent_${s(a).id}`,
class: "current-content"

@@ -363,129 +361,127 @@ }, null, 8, we)

},
setup(t, { expose: v }) {
const n = t, r = !!n.rootPaneData, u = M(() => ({
setup(n, { expose: l }) {
const t = n, a = !!t.rootPaneData, v = M(() => ({
...ge,
...n.colorSettings
})), C = r ? Object.entries(me).reduce(
(i, [o, a]) => (i[o] = u.value[a], i),
...t.colorSettings
})), y = a ? Object.entries(me).reduce(
(o, [i, r]) => (o[i] = v.value[r], o),
{}
) : {}, c = r ? n.rootPaneData : L(K), e = ae(c, n.paneId);
) : {}, d = a ? t.rootPaneData : L(K), e = oe(d, t.paneId);
Y(Z, e);
const h = k([]);
r && (Y(K, c), Y(oe, h.value));
const l = U("split-pane-el"), g = r ? /* @__PURE__ */ new Map() : L(X);
r && Y(X, g), N(() => {
g.set(n.paneId, {
closeTab: B,
insertTab: s,
insertPane: b,
doLayoutChildrenPane: z
const p = k([]);
a && (Y(K, d), Y(ae, p.value));
const g = U("split-pane-el"), b = a ? /* @__PURE__ */ new Map() : L(X);
a && Y(X, b), N(() => {
b.set(t.paneId, {
closeTab: _,
insertTab: f,
insertPane: z,
doLayoutChildrenPane: u
});
}), q(() => {
q(() => {
g.has(n.paneId) ? g.delete(n.paneId) : console.warn("实例已不存在", n.paneId);
b.has(t.paneId) ? b.delete(t.paneId) : console.warn("实例已不存在", t.paneId);
});
});
const _ = (i, o) => {
e.direction === y.Horizontal ? (e.size[i] -= o, e.size[i + 1] += o) : (e.size[i] += o, e.size[i + 1] -= o);
}, m = M(() => r ? x(e).filter((i) => h.value.includes(i.paneId)) : []);
let f;
const z = () => {
if (l.value)
if (e.direction === y.Vertical) {
const i = e.size.reduce((R, w) => R + w, 0);
if (!i) return;
const o = l.value.clientHeight, a = o / i, d = e.size.map((R) => R * a), I = o - d.reduce((R, w) => R + w, 0);
d[d.length - 1] += I, e.size = d;
const m = (o, i) => {
e.direction === D.Horizontal ? (e.size[o] -= i, e.size[o + 1] += i) : (e.size[o] += i, e.size[o + 1] -= i);
}, I = M(() => a ? x(e).filter((o) => p.value.includes(o.paneId)) : []);
let h;
const u = () => {
if (g.value)
if (e.direction === D.Vertical) {
const o = e.size.reduce((R, w) => R + w, 0);
if (!o) return;
const i = g.value.clientHeight, r = i / o, c = e.size.map((R) => R * r), B = i - c.reduce((R, w) => R + w, 0);
c[c.length - 1] += B, e.size = c;
} else {
const i = e.size.reduce((R, w) => R + w, 0);
if (!i) return;
const o = l.value.clientWidth, a = o / i, d = e.size.map((R) => R * a), I = o - d.reduce((R, w) => R + w, 0);
d[d.length - 1] += I, e.size = d;
const o = e.size.reduce((R, w) => R + w, 0);
if (!o) return;
const i = g.value.clientWidth, r = i / o, c = e.size.map((R) => R * r), B = i - c.reduce((R, w) => R + w, 0);
c[c.length - 1] += B, e.size = c;
}
};
N(() => {
f = he(l.value, () => {
z();
}), z();
h = he(g.value, () => {
u();
}), u();
}), q(() => {
f && f.stop();
h && h.stop();
});
const B = (i) => {
const o = e.tabs.findIndex((d) => d.id === i);
if (o === -1) return !1;
const a = e.activeTab === i;
if (e.tabs.splice(o, 1), e.tabs.length === 0 && E(c), e.tabs.length !== 0 && a) {
const d = o >= e.tabs.length ? e.tabs.length - 1 : o;
e.activeTab = e.tabs[d].id;
const _ = (o) => {
const i = e.tabs.findIndex((c) => c.id === o);
if (i === -1) return !1;
const r = e.activeTab === o;
if (e.tabs.splice(i, 1), e.tabs.length !== 0 && r) {
const c = i >= e.tabs.length ? e.tabs.length - 1 : i;
e.activeTab = e.tabs[c].id;
}
return !0;
}, s = (i, o, a) => {
const d = e.tabs.findIndex((I) => I.id === o);
if (d !== -1) {
const I = a === S.Left ? d : d + 1;
return e.activeTab = i.id, e.tabs.splice(I, 0, i), !0;
}, f = (o, i, r) => {
const c = e.tabs.findIndex((B) => B.id === i);
if (c !== -1) {
const B = r === S.Left ? c : c + 1;
return e.activeTab = o.id, e.tabs.splice(B, 0, o), !0;
}
return !1;
}, b = (i, o) => {
const a = { ...e };
}, z = (o, i) => {
const r = { ...e };
return e.id = ne(), e.children = [T.Bottom, T.Right].includes(
o
) ? [a, i] : [i, a], e.direction = [T.Left, T.Right].includes(
o
) ? y.Horizontal : y.Vertical, e.size = [100, 100], e.activeTab = "", e.tabs = [], !0;
i
) ? [r, o] : [o, r], e.direction = [T.Left, T.Right].includes(
i
) ? D.Horizontal : D.Vertical, e.size = [100, 100], e.activeTab = "", e.tabs = [], !0;
};
return v({
closeTab: B,
insertTab: s,
insertPane: b,
doLayoutChildrenPane: z
}), (i, o) => (D(), P(J, null, [
return l({
closeTab: _,
insertTab: f,
insertPane: z,
doLayoutChildrenPane: u
}), (o, i) => (C(), P(J, null, [
$("div", {
ref: "split-pane-el",
class: W(["drag-split-pane", {
"root-pane": r
"root-pane": a
}]),
style: F(p(C)),
id: `dragSplitPane_${p(e).id}`
style: F(s(y)),
id: `dragSplitPane_${s(e).id}`
}, [
p(e).children.length > 0 ? (D(), P("div", {
s(e).children.length > 0 ? (C(), P("div", {
key: 0,
class: W(["children-pane", [p(e).direction === p(y).Vertical ? "t-m-b" : "l-m-r"]])
class: W(["children-pane", [s(e).direction === s(D).Vertical ? "t-m-b" : "l-m-r"]])
}, [
(D(!0), P(J, null, Q(p(e).children, (a, d) => (D(), P("div", {
key: a.id,
(C(!0), P(J, null, Q(s(e).children, (r, c) => (C(), P("div", {
key: r.id,
class: "pane-wrapper",
style: F({
width: p(e).direction === p(y).Vertical ? "100%" : `${p(e).size[d]}px`,
height: p(e).direction === p(y).Horizontal ? "100%" : `${p(e).size[d]}px`
width: s(e).direction === s(D).Vertical ? "100%" : `${s(e).size[c]}px`,
height: s(e).direction === s(D).Horizontal ? "100%" : `${s(e).size[c]}px`
})
}, [
(D(), A(Ee, {
"pane-id": a.id,
key: a.id
(C(), A(Ee, {
"pane-id": r.id,
key: r.id
}, null, 8, ["pane-id"])),
d < p(e).children.length - 1 ? (D(), A(_e, {
c < s(e).children.length - 1 ? (C(), A(_e, {
key: 0,
direction: p(e).direction === p(y).Vertical ? "vertical" : "horizontal",
position: p(e).direction === p(y).Vertical ? "bottom" : "right",
onResize: (I) => _(d, I)
direction: s(e).direction === s(D).Vertical ? "vertical" : "horizontal",
position: s(e).direction === s(D).Vertical ? "bottom" : "right",
onResize: (B) => m(c, B)
}, null, 8, ["direction", "position", "onResize"])) : j("", !0)
], 4))), 128))
], 2)) : j("", !0),
p(e).tabs.length > 0 ? (D(), P("div", Me, [
G(Le, {
onCloseTab: o[0] || (o[0] = (a) => B(a))
}),
s(e).tabs.length > 0 ? (C(), P("div", Me, [
G(Le),
G(ke)
])) : j("", !0)
], 14, He),
r ? (D(), A(ue, { key: 0 }, [
(D(!0), P(J, null, Q(m.value, (a) => (D(), A(pe, {
key: a.id,
to: `#tabContent_${a.paneId}`
a ? (C(), A(ue, { key: 0 }, [
(C(!0), P(J, null, Q(I.value, (r) => (C(), A(pe, {
key: r.id,
to: `#tabContent_${r.paneId}`
}, [
fe($("div", $e, [
ve(i.$slots, "tab-content", { tab: a }, void 0, !0)
ve(o.$slots, "tab-content", { tab: r }, void 0, !0)
], 512), [
[be, a.id === a.activeTab]
[be, r.id === r.activeTab]
])

@@ -496,5 +492,14 @@ ], 8, ["to"]))), 128))

}
}), Ee = /* @__PURE__ */ O(xe, [["__scopeId", "data-v-dac10325"]]);
}), Ee = /* @__PURE__ */ O(xe, [["__scopeId", "data-v-09e74f74"]]);
export {
Ee as DragSplitPane
Ee as DragSplitPane,
D as PaneDirection,
T as TabInsertPanePosition,
S as TabInsertPosition,
me as colorVariables,
ge as defaultColorSetting,
X as instanceMapInjectKey,
ae as loadedPaneTabInjectKey,
Z as paneNodeInjectKey,
K as rootPaneNodeInjectKey
};

6

dist/lib/component/TabHeaders.vue.d.ts

@@ -1,8 +0,4 @@

declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
closeTab: (tabId: string) => any;
}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
onCloseTab?: ((tabId: string) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
tabHeaderWrapperRef: HTMLDivElement;
}, HTMLDivElement>;
export default _default;

8

dist/lib/component/TabItem.vue.d.ts

@@ -8,5 +8,3 @@ import { PropType } from 'vue';

};
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
closeTab: (tabId: string) => any;
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
tab: {

@@ -16,7 +14,5 @@ type: PropType<Tab>;

};
}>> & Readonly<{
onCloseTab?: ((tabId: string) => any) | undefined;
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
tabItemRef: HTMLDivElement;
}, HTMLDivElement>;
export default _default;

1

dist/lib/main.d.ts
import { default as DragSplitPane } from './DragSplitPane.vue';
export * from './types';
export { DragSplitPane };

2

package.json
{
"name": "drag-split-pane",
"version": "0.0.2",
"version": "0.0.3",
"type": "module",

@@ -5,0 +5,0 @@ "main": "dist/drag-split-pane.js",

dist/drag-split-pane.css

Sorry, the diff of this file is not supported yet