vue-allotment
Version:
Vue 3 port of React Allotment - resizable split views with draggable dividers
1,376 lines (1,375 loc) • 47.8 kB
JavaScript
import { defineComponent as ue, ref as O, reactive as te, useSlots as xe, provide as _e, nextTick as X, computed as Ve, onMounted as me, watch as K, onUnmounted as fe, createElementBlock as pe, openBlock as de, normalizeClass as Z, unref as F, createElementVNode as Ee, renderSlot as ve, getCurrentInstance as De, inject as Le } from "vue";
function Pe(s, e, { signal: t, edges: i } = {}) {
let r, l = null;
const m = i != null && i.includes("leading"), a = i == null || i.includes("trailing"), n = () => {
l !== null && (s.apply(r, l), r = void 0, l = null);
}, o = () => {
a && n(), z();
};
let h = null;
const c = () => {
h != null && clearTimeout(h), h = setTimeout(() => {
h = null, o();
}, e);
}, f = () => {
h !== null && (clearTimeout(h), h = null);
}, z = () => {
f(), r = void 0, l = null;
}, v = () => {
n();
}, b = function(...p) {
if (t?.aborted)
return;
r = this, l = p;
const _ = h == null;
c(), m && _ && n();
};
return b.schedule = c, b.cancel = z, b.flush = v, t?.addEventListener("abort", z, { once: !0 }), b;
}
function Te() {
}
function T(s, e, t) {
return t == null ? Math.min(s, e) : Math.min(Math.max(s, e), t);
}
function ie(s) {
return Object.getOwnPropertySymbols(s).filter((e) => Object.prototype.propertyIsEnumerable.call(s, e));
}
function se(s) {
return s == null ? s === void 0 ? "[object Undefined]" : "[object Null]" : Object.prototype.toString.call(s);
}
const je = "[object RegExp]", Ne = "[object String]", Oe = "[object Number]", Me = "[object Boolean]", ne = "[object Arguments]", Ae = "[object Symbol]", Ce = "[object Date]", Fe = "[object Map]", $e = "[object Set]", Be = "[object Array]", He = "[object Function]", Ue = "[object ArrayBuffer]", q = "[object Object]", Re = "[object Error]", Ye = "[object DataView]", ke = "[object Uint8Array]", Ke = "[object Uint8ClampedArray]", We = "[object Uint16Array]", Ge = "[object Uint32Array]", Xe = "[object BigUint64Array]", qe = "[object Int8Array]", Je = "[object Int16Array]", Qe = "[object Int32Array]", Ze = "[object BigInt64Array]", et = "[object Float32Array]", tt = "[object Float64Array]";
function re(s) {
if (!s || typeof s != "object")
return !1;
const e = Object.getPrototypeOf(s);
return e === null || e === Object.prototype || Object.getPrototypeOf(e) === null ? Object.prototype.toString.call(s) === "[object Object]" : !1;
}
function it(s, e) {
return s === e || Number.isNaN(s) && Number.isNaN(e);
}
function st(s, e, t) {
return H(s, e, void 0, void 0, void 0, void 0, t);
}
function H(s, e, t, i, r, l, m) {
const a = m(s, e, t, i, r, l);
if (a !== void 0)
return a;
if (typeof s == typeof e)
switch (typeof s) {
case "bigint":
case "string":
case "boolean":
case "symbol":
case "undefined":
return s === e;
case "number":
return s === e || Object.is(s, e);
case "function":
return s === e;
case "object":
return U(s, e, l, m);
}
return U(s, e, l, m);
}
function U(s, e, t, i) {
if (Object.is(s, e))
return !0;
let r = se(s), l = se(e);
if (r === ne && (r = q), l === ne && (l = q), r !== l)
return !1;
switch (r) {
case Ne:
return s.toString() === e.toString();
case Oe: {
const n = s.valueOf(), o = e.valueOf();
return it(n, o);
}
case Me:
case Ce:
case Ae:
return Object.is(s.valueOf(), e.valueOf());
case je:
return s.source === e.source && s.flags === e.flags;
case He:
return s === e;
}
t = t ?? /* @__PURE__ */ new Map();
const m = t.get(s), a = t.get(e);
if (m != null && a != null)
return m === e;
t.set(s, e), t.set(e, s);
try {
switch (r) {
case Fe: {
if (s.size !== e.size)
return !1;
for (const [n, o] of s.entries())
if (!e.has(n) || !H(o, e.get(n), n, s, e, t, i))
return !1;
return !0;
}
case $e: {
if (s.size !== e.size)
return !1;
const n = Array.from(s.values()), o = Array.from(e.values());
for (let h = 0; h < n.length; h++) {
const c = n[h], f = o.findIndex((z) => H(c, z, void 0, s, e, t, i));
if (f === -1)
return !1;
o.splice(f, 1);
}
return !0;
}
case Be:
case ke:
case Ke:
case We:
case Ge:
case Xe:
case qe:
case Je:
case Qe:
case Ze:
case et:
case tt: {
if (typeof Buffer < "u" && Buffer.isBuffer(s) !== Buffer.isBuffer(e) || s.length !== e.length)
return !1;
for (let n = 0; n < s.length; n++)
if (!H(s[n], e[n], n, s, e, t, i))
return !1;
return !0;
}
case Ue:
return s.byteLength !== e.byteLength ? !1 : U(new Uint8Array(s), new Uint8Array(e), t, i);
case Ye:
return s.byteLength !== e.byteLength || s.byteOffset !== e.byteOffset ? !1 : U(new Uint8Array(s), new Uint8Array(e), t, i);
case Re:
return s.name === e.name && s.message === e.message;
case q: {
if (!(U(s.constructor, e.constructor, t, i) || re(s) && re(e)))
return !1;
const o = [...Object.keys(s), ...ie(s)], h = [...Object.keys(e), ...ie(e)];
if (o.length !== h.length)
return !1;
for (let c = 0; c < o.length; c++) {
const f = o[c], z = s[f];
if (!Object.hasOwn(e, f))
return !1;
const v = e[f];
if (!H(z, v, f, s, e, t, i))
return !1;
}
return !0;
}
default:
return !1;
}
} finally {
t.delete(s), t.delete(e);
}
}
function nt(s, e) {
return st(s, e, Te);
}
const rt = "_splitView_pzp7c_6", ot = "_sashContainer_pzp7c_13", at = "_sash_pzp7c_13", lt = "_splitViewContainer_pzp7c_24", ct = "_splitViewView_pzp7c_31", ht = "_vertical_pzp7c_37", ut = "_horizontal_pzp7c_41", mt = "_separatorBorder_pzp7c_45", M = {
splitView: rt,
sashContainer: ot,
sash: at,
splitViewContainer: lt,
splitViewView: ct,
vertical: ht,
horizontal: ut,
separatorBorder: mt
};
let ze = !1, ge = !1, B;
typeof navigator == "object" && (B = navigator.userAgent, ge = B.includes("Macintosh"), ze = (B.includes("Macintosh") || B.includes("iPad") || B.includes("iPhone")) && !!navigator.maxTouchPoints && navigator.maxTouchPoints > 0);
const ye = ze, ft = ge;
class pt {
_size;
getSize() {
return this._size;
}
setSize(e) {
this._size = e;
}
}
function Y(s, e) {
const t = s.length, i = t - e.length;
return i >= 0 && s.slice(i, t) === e;
}
function dt(s) {
return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
}
var J = { exports: {} }, oe;
function vt() {
return oe || (oe = 1, function(s) {
var e = Object.prototype.hasOwnProperty, t = "~";
function i() {
}
Object.create && (i.prototype = /* @__PURE__ */ Object.create(null), new i().__proto__ || (t = !1));
function r(n, o, h) {
this.fn = n, this.context = o, this.once = h || !1;
}
function l(n, o, h, c, f) {
if (typeof h != "function")
throw new TypeError("The listener must be a function");
var z = new r(h, c || n, f), v = t ? t + o : o;
return n._events[v] ? n._events[v].fn ? n._events[v] = [n._events[v], z] : n._events[v].push(z) : (n._events[v] = z, n._eventsCount++), n;
}
function m(n, o) {
--n._eventsCount === 0 ? n._events = new i() : delete n._events[o];
}
function a() {
this._events = new i(), this._eventsCount = 0;
}
a.prototype.eventNames = function() {
var o = [], h, c;
if (this._eventsCount === 0) return o;
for (c in h = this._events)
e.call(h, c) && o.push(t ? c.slice(1) : c);
return Object.getOwnPropertySymbols ? o.concat(Object.getOwnPropertySymbols(h)) : o;
}, a.prototype.listeners = function(o) {
var h = t ? t + o : o, c = this._events[h];
if (!c) return [];
if (c.fn) return [c.fn];
for (var f = 0, z = c.length, v = new Array(z); f < z; f++)
v[f] = c[f].fn;
return v;
}, a.prototype.listenerCount = function(o) {
var h = t ? t + o : o, c = this._events[h];
return c ? c.fn ? 1 : c.length : 0;
}, a.prototype.emit = function(o, h, c, f, z, v) {
var b = t ? t + o : o;
if (!this._events[b]) return !1;
var p = this._events[b], _ = arguments.length, L, I;
if (p.fn) {
switch (p.once && this.removeListener(o, p.fn, void 0, !0), _) {
case 1:
return p.fn.call(p.context), !0;
case 2:
return p.fn.call(p.context, h), !0;
case 3:
return p.fn.call(p.context, h, c), !0;
case 4:
return p.fn.call(p.context, h, c, f), !0;
case 5:
return p.fn.call(p.context, h, c, f, z), !0;
case 6:
return p.fn.call(p.context, h, c, f, z, v), !0;
}
for (I = 1, L = new Array(_ - 1); I < _; I++)
L[I - 1] = arguments[I];
p.fn.apply(p.context, L);
} else {
var $ = p.length, N;
for (I = 0; I < $; I++)
switch (p[I].once && this.removeListener(o, p[I].fn, void 0, !0), _) {
case 1:
p[I].fn.call(p[I].context);
break;
case 2:
p[I].fn.call(p[I].context, h);
break;
case 3:
p[I].fn.call(p[I].context, h, c);
break;
case 4:
p[I].fn.call(p[I].context, h, c, f);
break;
default:
if (!L) for (N = 1, L = new Array(_ - 1); N < _; N++)
L[N - 1] = arguments[N];
p[I].fn.apply(p[I].context, L);
}
}
return !0;
}, a.prototype.on = function(o, h, c) {
return l(this, o, h, c, !1);
}, a.prototype.once = function(o, h, c) {
return l(this, o, h, c, !0);
}, a.prototype.removeListener = function(o, h, c, f) {
var z = t ? t + o : o;
if (!this._events[z]) return this;
if (!h)
return m(this, z), this;
var v = this._events[z];
if (v.fn)
v.fn === h && (!f || v.once) && (!c || v.context === c) && m(this, z);
else {
for (var b = 0, p = [], _ = v.length; b < _; b++)
(v[b].fn !== h || f && !v[b].once || c && v[b].context !== c) && p.push(v[b]);
p.length ? this._events[z] = p.length === 1 ? p[0] : p : m(this, z);
}
return this;
}, a.prototype.removeAllListeners = function(o) {
var h;
return o ? (h = t ? t + o : o, this._events[h] && m(this, h)) : (this._events = new i(), this._eventsCount = 0), this;
}, a.prototype.off = a.prototype.removeListener, a.prototype.addListener = a.prototype.on, a.prefixed = t, a.EventEmitter = a, s.exports = a;
}(J)), J.exports;
}
var zt = vt();
const ee = /* @__PURE__ */ dt(zt);
function ae(s, e) {
const t = s.indexOf(e);
t !== -1 && (s.splice(t, 1), s.unshift(e));
}
function Q(s, e) {
const t = s.indexOf(e);
t !== -1 && (s.splice(t, 1), s.push(e));
}
function P(s, e, t = 1) {
const i = Math.max(0, Math.ceil((e - s) / t)), r = Array.from({ length: i });
let l = -1;
for (; ++l < i; )
r[l] = s + l * t;
return r;
}
const gt = "_sash_j5cmb_7", yt = "_disabled_j5cmb_15", St = "_mac_j5cmb_19", wt = "_vertical_j5cmb_19", bt = "_minimum_j5cmb_23", It = "_maximum_j5cmb_27", xt = "_horizontal_j5cmb_31", _t = "_hover_j5cmb_126", Vt = "_active_j5cmb_127", D = {
sash: gt,
disabled: yt,
mac: St,
vertical: wt,
minimum: bt,
maximum: It,
horizontal: xt,
hover: _t,
active: Vt
};
var j = /* @__PURE__ */ ((s) => (s[s.Vertical = 0] = "Vertical", s[s.Horizontal = 1] = "Horizontal", s))(j || {}), A = /* @__PURE__ */ ((s) => (s[s.Disabled = 0] = "Disabled", s[s.Minimum = 1] = "Minimum", s[s.Maximum = 2] = "Maximum", s[s.Enabled = 3] = "Enabled", s))(A || {});
let Se = ye ? 20 : 8;
const we = new ee();
function Et(s) {
Se = s, we.emit("onDidChangeGlobalSize", s);
}
class le extends ee {
el;
layoutProvider;
orientation;
size;
hoverDelay = 300;
hoverDelayerFunc = (e) => e.classList.add("sash-hover", D.hover);
hoverDelayer = Pe(
this.hoverDelayerFunc,
this.hoverDelay
);
_state = 3;
get state() {
return this._state;
}
/**
* The state of a sash defines whether it can be interacted with by the user
* as well as what mouse cursor to use, when hovered.
*/
set state(e) {
this._state !== e && (this.el.classList.toggle(
D.disabled,
e === 0
/* Disabled */
), this.el.classList.toggle(
"sash-disabled",
e === 0
/* Disabled */
), this.el.classList.toggle(
D.minimum,
e === 1
/* Minimum */
), this.el.classList.toggle(
"sash-minimum",
e === 1
/* Minimum */
), this.el.classList.toggle(
D.maximum,
e === 2
/* Maximum */
), this.el.classList.toggle(
"sash-maximum",
e === 2
/* Maximum */
), this._state = e, this.emit("enablementChange", e));
}
constructor(e, t, i) {
super(), this.el = document.createElement("div"), this.el.classList.add("sash", D.sash), this.el.dataset.testid = "sash", e.append(this.el), ft && this.el.classList.add("sash-mac", D.mac), this.el.addEventListener("pointerdown", this.onPointerStart), this.el.addEventListener("dblclick", this.onPointerDoublePress), this.el.addEventListener("mouseenter", this.onMouseEnter), this.el.addEventListener("mouseleave", this.onMouseLeave), typeof i.size == "number" ? (this.size = i.size, i.orientation === 0 ? this.el.style.width = `${this.size}px` : this.el.style.height = `${this.size}px`) : (this.size = Se, we.on("onDidChangeGlobalSize", (r) => {
this.size = r, this.layout();
})), this.layoutProvider = t, this.orientation = i.orientation ?? 0, this.orientation === 1 ? (this.el.classList.add("sash-horizontal", D.horizontal), this.el.classList.remove("sash-vertical", D.vertical)) : (this.el.classList.remove("sash-horizontal", D.horizontal), this.el.classList.add("sash-vertical", D.vertical)), i.skipInitialLayout || this.layout();
}
onPointerStart = (e) => {
const t = e.pageX, i = e.pageY, r = {
startX: t,
currentX: t,
startY: i,
currentY: i
};
this.el.classList.add("sash-active", D.active), this.emit("start", r), this.el.setPointerCapture(e.pointerId);
const l = (a) => {
a.preventDefault();
const n = {
startX: t,
currentX: a.pageX,
startY: i,
currentY: a.pageY
};
this.emit("change", n);
}, m = (a) => {
a.preventDefault(), this.el.classList.remove("sash-active", D.active), this.hoverDelayer.cancel(), this.emit("end"), this.el.releasePointerCapture(a.pointerId), globalThis.removeEventListener("pointermove", l), globalThis.removeEventListener("pointerup", m);
};
globalThis.addEventListener("pointermove", l), globalThis.addEventListener("pointerup", m);
};
onPointerDoublePress = () => {
this.emit("reset");
};
onMouseEnter = () => {
this.el.classList.contains(D.active) ? (this.hoverDelayer.cancel(), this.el.classList.add("sash-hover", D.hover)) : this.hoverDelayer(this.el);
};
onMouseLeave = () => {
this.hoverDelayer.cancel(), this.el.classList.remove("sash-hover", D.hover);
};
/**
* Layout the sash. The sash will size and position itself
* based on its provided {@link SashLayoutProvider layout provider}.
*/
layout() {
if (this.orientation === 0) {
const e = this.layoutProvider;
this.el.style.left = `${e.getVerticalSashLeft(this) - this.size / 2}px`, e.getVerticalSashTop && (this.el.style.top = `${e.getVerticalSashTop(this)}px`), e.getVerticalSashHeight && (this.el.style.height = `${e.getVerticalSashHeight(this)}px`);
} else {
const e = this.layoutProvider;
this.el.style.top = `${e.getHorizontalSashTop(this) - this.size / 2}px`, e.getHorizontalSashLeft && (this.el.style.left = `${e.getHorizontalSashLeft(this)}px`), e.getHorizontalSashWidth && (this.el.style.width = `${e.getHorizontalSashWidth(this)}px`);
}
}
dispose() {
this.el.removeEventListener("pointerdown", this.onPointerStart), this.el.removeEventListener("dblclick", this.onPointerDoublePress), this.el.removeEventListener("mouseenter", this.onMouseEnter), this.el.removeEventListener("mouseleave", this.onMouseLeave), this.el.remove();
}
}
const be = {
/**
* When adding or removing views, distribute the delta space among
* all other views.
*/
Distribute: { type: "distribute" },
/**
* When adding or removing views, split the delta space with another
* specific view, indexed by the provided `index`.
*/
Split: (s) => ({ type: "split", index: s }),
/**
* When adding or removing views, assume the view is invisible.
*/
Invisible: (s) => ({ type: "invisible", cachedVisibleSize: s })
};
var W = /* @__PURE__ */ ((s) => (s[s.Normal = 0] = "Normal", s[s.Low = 1] = "Low", s[s.High = 2] = "High", s))(W || {});
class Ie {
container;
view;
_size;
_cachedVisibleSize = void 0;
constructor(e, t, i) {
this.container = e, this.view = t, this.container.classList.add("split-view-view", M.splitViewView), this.container.dataset.testid = "split-view-view", typeof i == "number" ? (this._size = i, this._cachedVisibleSize = void 0, e.classList.add("split-view-view-visible")) : (this._size = 0, this._cachedVisibleSize = i.cachedVisibleSize);
}
set size(e) {
this._size = e;
}
get size() {
return this._size;
}
get priority() {
return this.view.priority;
}
get snap() {
return !!this.view.snap;
}
get visible() {
return this._cachedVisibleSize === void 0;
}
setVisible(e, t) {
e !== this.visible && (e ? (this.size = T(
this._cachedVisibleSize ?? 0,
this.view.minimumSize,
this.view.maximumSize
), this._cachedVisibleSize = void 0) : (this._cachedVisibleSize = typeof t == "number" ? t : this.size, this.size = 0), this.container.classList.toggle("split-view-view-visible", e), this.view.setVisible && this.view.setVisible(e));
}
get minimumSize() {
return this.visible ? this.view.minimumSize : 0;
}
get maximumSize() {
return this.visible ? this.view.maximumSize : 0;
}
get cachedVisibleSize() {
return this._cachedVisibleSize;
}
}
class Dt extends Ie {
layout(e) {
if (!this.visible) {
this.container.style.height = "0px", this.container.style.top = `${e}px`, this.container.style.left = "0px", this.container.style.width = "100%";
return;
}
this.container.style.top = `${e}px`, this.container.style.height = `${this.size}px`, this.container.style.left = "0px", this.container.style.width = "100%", this.view.layout(this.size, e);
}
}
class Lt extends Ie {
layout(e) {
if (!this.visible) {
this.container.style.width = "0px", this.container.style.left = `${e}px`, this.container.style.top = "0px", this.container.style.height = "100%";
return;
}
this.container.style.left = `${e}px`, this.container.style.width = `${this.size}px`, this.container.style.top = "0px", this.container.style.height = "100%", this.view.layout(this.size, e);
}
}
class Pt extends ee {
onDidChange;
onDidDragStart;
onDidDragEnd;
_orientation;
get orientation() {
return this._orientation;
}
set orientation(e) {
this._orientation = e;
}
sashContainer;
size = 0;
contentSize = 0;
proportions = void 0;
viewItems = [];
sashItems = [];
sashDragState;
_proportionalLayout;
get proportionalLayout() {
return this._proportionalLayout;
}
set proportionalLayout(e) {
this._proportionalLayout = e;
}
getSashOrthogonalSize;
_startSnappingEnabled = !0;
get startSnappingEnabled() {
return this._startSnappingEnabled;
}
set startSnappingEnabled(e) {
this._startSnappingEnabled !== e && (this._startSnappingEnabled = e, this.updateSashEnablement());
}
_endSnappingEnabled = !0;
get endSnappingEnabled() {
return this._endSnappingEnabled;
}
set endSnappingEnabled(e) {
this._endSnappingEnabled !== e && (this._endSnappingEnabled = e, this.updateSashEnablement());
}
/** Create a new {@link SplitView} instance. */
constructor(e, t = {}, i, r, l) {
if (super(), this._orientation = t.orientation ?? j.Vertical, this._proportionalLayout = t.proportionalLayout ?? !0, this.getSashOrthogonalSize = t.getSashOrthogonalSize, i && (this.onDidChange = i), r && (this.onDidDragStart = r), l && (this.onDidDragEnd = l), this.sashContainer = document.createElement("div"), this.sashContainer.classList.add("sash-container", M.sashContainer), e.prepend(this.sashContainer), t.descriptor) {
this.size = t.descriptor.size;
for (const [m, a] of t.descriptor.views.entries()) {
const n = a.size, o = a.container, h = a.view;
this.addView(o, h, n, m, !0);
}
this.contentSize = this.viewItems.reduce((m, a) => m + a.size, 0), this.saveProportions();
}
}
addView(e, t, i, r = this.viewItems.length, l) {
let m;
typeof i == "number" ? m = i : i.type === "split" ? m = this.getViewSize(i.index) / 2 : i.type === "invisible" ? m = { cachedVisibleSize: i.cachedVisibleSize } : m = t.minimumSize;
const a = this.orientation === j.Vertical ? new Dt(e, t, m) : new Lt(e, t, m);
if (this.viewItems.splice(r, 0, a), this.viewItems.length > 1) {
const n = this.orientation === j.Vertical ? new le(
this.sashContainer,
{
getHorizontalSashTop: (c) => this.getSashPosition(c),
getHorizontalSashWidth: this.getSashOrthogonalSize
},
{ orientation: j.Horizontal }
) : new le(
this.sashContainer,
{
getVerticalSashLeft: (c) => this.getSashPosition(c),
getVerticalSashHeight: this.getSashOrthogonalSize
},
{ orientation: j.Vertical }
), o = this.orientation === j.Vertical ? (c) => ({
sash: n,
start: c.startY,
current: c.currentY
}) : (c) => ({
sash: n,
start: c.startX,
current: c.currentX
});
n.on("start", (c) => {
this.emit("sashDragStart"), this.onSashStart(o(c));
const f = this.viewItems.map((z) => z.size);
this.onDidDragStart?.(f);
}), n.on("change", (c) => this.onSashChange(o(c))), n.on("end", () => {
this.emit("sashDragEnd");
let c = this.sashItems.findIndex((z) => z.sash === n);
if (c === -1) {
const z = n.el;
z && (c = this.sashItems.findIndex((v) => v.sash.el === z));
}
this.onSashEnd(c);
const f = this.viewItems.map((z) => z.size);
this.onDidDragEnd?.(f);
}), n.on("reset", () => {
let c = this.sashItems.findIndex((p) => p.sash === n);
if (c === -1) {
const p = n.el;
p && (c = this.sashItems.findIndex((_) => _.sash.el === p));
}
const f = P(c, -1, -1), z = P(c + 1, this.viewItems.length), v = this.findFirstSnapIndex(f), b = this.findFirstSnapIndex(z);
typeof v == "number" && !this.viewItems[v].visible || typeof b == "number" && !this.viewItems[b].visible || this.emit("sashreset", c);
});
const h = { sash: n };
this.sashItems.splice(r - 1, 0, h);
}
l || this.relayout(), !l && typeof i != "number" && i.type === "distribute" && this.distributeViewSizes();
}
removeView(e, t) {
if (e < 0 || e >= this.viewItems.length)
throw new Error("Index out of bounds");
const r = this.viewItems.splice(e, 1)[0].view;
if (this.viewItems.length > 0) {
const l = Math.max(e - 1, 0);
this.sashItems.splice(l, 1)[0].sash.dispose();
}
return this.relayout(), t && t.type === "distribute" && this.distributeViewSizes(), r;
}
moveView(e, t, i) {
const r = this.getViewCachedVisibleSize(t), l = r === void 0 ? this.getViewSize(t) : be.Invisible(r), m = this.removeView(t);
this.addView(e, m, l, i);
}
getViewCachedVisibleSize(e) {
if (e < 0 || e >= this.viewItems.length)
throw new Error("Index out of bounds");
return this.viewItems[e].cachedVisibleSize;
}
layout(e = this.size) {
if (this.viewItems.length === 0)
return;
const t = Math.max(this.size, this.contentSize);
if (this.size = e, this.proportions)
for (let i = 0; i < this.viewItems.length; i++) {
const r = this.viewItems[i];
r && this.proportions[i] !== void 0 && (r.size = T(
Math.round(this.proportions[i] * e),
r.minimumSize,
r.maximumSize
));
}
else {
const i = P(0, this.viewItems.length), r = i.filter(
(m) => this.viewItems[m] && this.viewItems[m].priority === 1
/* Low */
), l = i.filter(
(m) => this.viewItems[m] && this.viewItems[m].priority === 2
/* High */
);
this.resize(
this.viewItems.length - 1,
e - t,
void 0,
r,
l
);
}
this.distributeEmptySpace(), this.layoutViews();
}
resizeView(e, t) {
if (e < 0 || e >= this.viewItems.length)
return;
const i = P(0, this.viewItems.length).filter((a) => a !== e), r = [
...i.filter(
(a) => this.viewItems[a].priority === 1
/* Low */
),
e
], l = i.filter(
(a) => this.viewItems[a].priority === 2
/* High */
), m = this.viewItems[e];
t = Math.round(t), t = T(t, m.minimumSize, Math.min(m.maximumSize, this.size)), m.size = t, this.relayout(r, l);
}
resizeViews(e) {
for (let [t, i] of e.entries()) {
const r = this.viewItems[t];
i = Math.round(i), i = T(
i,
r.minimumSize,
Math.min(r.maximumSize, this.size)
), r.size = i;
}
this.contentSize = this.viewItems.reduce((t, i) => t + i.size, 0), this.saveProportions(), this.layout(this.size);
}
getViewSize(e) {
return e < 0 || e >= this.viewItems.length ? -1 : this.viewItems[e].size;
}
isViewVisible(e) {
if (e < 0 || e >= this.viewItems.length)
throw new Error("Index out of bounds");
return this.viewItems[e].visible;
}
setViewVisible(e, t) {
if (e < 0 || e >= this.viewItems.length)
throw new Error("Index out of bounds");
this.viewItems[e].setVisible(t), this.emit("sashchange", e), this.distributeEmptySpace(), this.layoutViews(), this.saveProportions();
}
distributeViewSizes() {
const e = [];
let t = 0;
for (const a of this.viewItems)
a.maximumSize - a.minimumSize > 0 && (e.push(a), t += a.size);
const i = Math.floor(t / e.length);
for (const a of e)
a.size = T(i, a.minimumSize, a.maximumSize);
const r = P(0, this.viewItems.length), l = r.filter(
(a) => this.viewItems[a].priority === 1
/* Low */
), m = r.filter(
(a) => this.viewItems[a].priority === 2
/* High */
);
this.relayout(l, m);
}
dispose() {
for (const e of this.sashItems) e.sash.dispose();
this.sashItems = [], this.viewItems = [], this.sashContainer && this.sashContainer.parentElement && this.sashContainer.remove();
}
onSashStart({ sash: e, start: t, current: i }) {
let r = this.sashItems.findIndex((v) => v.sash === e);
if (r === -1) {
const v = e.el;
v && (r = this.sashItems.findIndex((b) => b.sash.el === v));
}
const l = this.viewItems.map((v) => v.size), m = P(r, -1, -1), a = P(r + 1, this.viewItems.length), n = this.getMinDelta(m, a, l), o = this.getMaxDelta(m, a, l);
let h, c;
const f = this.findFirstSnapIndex(m), z = this.findFirstSnapIndex(a);
if (typeof f == "number") {
const v = this.viewItems[f], b = Math.floor(v.minimumSize / 2);
h = {
index: f,
limitDelta: v.visible ? n - b : n + b,
size: v.size
};
}
if (typeof z == "number") {
const v = this.viewItems[z], b = Math.floor(v.minimumSize / 2);
c = {
index: z,
limitDelta: v.visible ? o + b : o - b,
size: v.size
};
}
this.sashDragState = {
index: r,
start: t,
current: i,
sizes: l,
minDelta: n,
maxDelta: o,
snapBefore: h,
snapAfter: c
};
}
onSashChange({ current: e }) {
const { index: t, start: i, sizes: r, minDelta: l, maxDelta: m, snapBefore: a, snapAfter: n } = this.sashDragState, o = e - i;
this.resize(t, o, r, void 0, void 0, l, m, a, n), this.distributeEmptySpace(), this.layoutViews();
}
onSashEnd(e) {
this.emit("sashchange", e), this.sashDragState = void 0, this.saveProportions();
const t = this.viewItems.map((i) => i.size);
this.onDidChange?.(t);
}
getMinDelta(e, t, i) {
const r = e.reduce(
(m, a) => m + (this.viewItems[a].minimumSize - i[a]),
0
), l = t.reduce(
(m, a) => m + (i[a] - this.viewItems[a].maximumSize),
0
);
return Math.max(r, l);
}
getMaxDelta(e, t, i) {
const r = e.reduce(
(m, a) => m + (this.viewItems[a].maximumSize - i[a]),
0
), l = t.reduce(
(m, a) => m + (i[a] - this.viewItems[a].minimumSize),
0
);
return Math.min(l, r);
}
resize(e, t, i, r, l, m = Number.NEGATIVE_INFINITY, a = Number.POSITIVE_INFINITY, n, o) {
if (e < 0 || e >= this.viewItems.length || this.viewItems.length === 0)
return 0;
const h = P(e, -1, -1), c = P(e + 1, this.viewItems.length);
if (l)
for (const u of l)
ae(h, u), ae(c, u);
if (r)
for (const u of r)
Q(h, u), Q(c, u);
const f = i ?? this.viewItems.map((u) => u?.size || 0), z = h.map((u) => this.viewItems[u]), v = h.map((u) => f[u]), b = c.map((u) => this.viewItems[u]), p = c.map((u) => f[u]), _ = h.reduce(
(u, S) => u + (this.viewItems[S].minimumSize - f[S]),
0
), L = h.reduce(
(u, S) => u + (this.viewItems[S].maximumSize - f[S]),
0
), I = c.length === 0 ? Number.POSITIVE_INFINITY : c.reduce(
(u, S) => u + (f[S] - this.viewItems[S].minimumSize),
0
), $ = c.length === 0 ? Number.NEGATIVE_INFINITY : c.reduce(
(u, S) => u + (f[S] - this.viewItems[S].maximumSize),
0
), N = Math.max(_, $, m), G = Math.min(I, L, a);
let d = !1;
if (n) {
const u = this.viewItems[n.index], S = t >= n.limitDelta;
d = S !== u.visible, u.setVisible(S, n.size);
}
if (!d && o) {
const u = this.viewItems[o.index], S = t < o.limitDelta;
d = S !== u.visible, u.setVisible(S, o.size);
}
if (d)
return this.resize(
e,
t,
i,
r,
l,
m,
a
);
t = T(t, N, G);
for (let u = 0, S = t; u < z.length; u++) {
const E = z[u];
if (!E)
continue;
const y = T(
v[u] + S,
E.minimumSize,
E.maximumSize
), g = y - v[u];
S -= g, E.size = y;
}
for (let u = 0, S = t; u < b.length; u++) {
const E = b[u];
if (!E)
continue;
const y = T(
p[u] - S,
E.minimumSize,
E.maximumSize
), g = y - p[u];
S += g, E.size = y;
}
return t;
}
distributeEmptySpace(e) {
if (this.viewItems.length === 0)
return;
const t = this.viewItems.reduce((o, h) => o + h.size, 0);
let i = this.size - t;
const r = P(0, this.viewItems.length), l = [], m = r.filter(
(o) => this.viewItems[o].priority === 1
/* Low */
), a = r.filter(
(o) => this.viewItems[o].priority === 0
/* Normal */
), n = r.filter(
(o) => this.viewItems[o].priority === 2
/* High */
);
l.push(
...n,
...a,
...m
), typeof e == "number" && Q(l, e);
for (let o = 0; i !== 0 && o < l.length; o++) {
const h = this.viewItems[l[o]];
if (!h)
continue;
const c = T(
h.size + i,
h.minimumSize,
h.maximumSize
), f = c - h.size;
i -= f, h.size = c;
}
this.contentSize = this.viewItems.reduce((o, h) => o + h.size, 0);
}
layoutViews() {
this.contentSize = this.viewItems.reduce((t, i) => t + i.size, 0);
let e = 0;
for (const t of this.viewItems)
t && (t.layout(e), e += t.size);
for (const t of this.sashItems) t.sash.layout();
this.updateSashEnablement();
}
saveProportions() {
this.proportionalLayout && this.contentSize > 0 && (this.proportions = this.viewItems.map((e) => e.size / this.contentSize));
}
relayout(e, t) {
const i = this.viewItems.reduce((r, l) => r + l.size, 0);
this.resize(
this.viewItems.length - 1,
this.size - i,
void 0,
e,
t,
Number.NEGATIVE_INFINITY,
Number.POSITIVE_INFINITY
), this.distributeEmptySpace(), this.layoutViews(), this.saveProportions();
}
getSashPosition(e) {
let t = -1;
for (let r = 0; r < this.sashItems.length; r++)
if (this.sashItems[r].sash === e) {
t = r;
break;
}
if (t === -1) {
const r = e.el || e;
if (r) {
for (let l = 0; l < this.sashItems.length; l++)
if ((this.sashItems[l].sash.el || this.sashItems[l].sash) === r) {
t = l;
break;
}
}
}
if (t === -1)
return 0;
let i = 0;
for (let r = 0; r <= t; r++)
this.viewItems[r] && (i += this.viewItems[r].size);
return i;
}
findFirstSnapIndex(e) {
for (const t of e) {
const i = this.viewItems[t];
if (i.visible && i.snap)
return t;
}
for (const t of e) {
const i = this.viewItems[t];
if (i.visible && i.maximumSize - i.minimumSize > 0)
return;
if (!i.visible && i.snap)
return t;
}
}
updateSashEnablement() {
let e = !1;
const t = this.viewItems.map(
(n) => e = n.size - n.minimumSize > 0 || e
);
e = !1;
const i = this.viewItems.map(
(n) => e = n.maximumSize - n.size > 0 || e
), r = [...this.viewItems].toReversed();
e = !1;
const l = r.map((n) => e = n.size - n.minimumSize > 0 || e).toReversed();
e = !1;
const m = r.map((n) => e = n.maximumSize - n.size > 0 || e).toReversed();
let a = 0;
for (let n = 0; n < this.sashItems.length; n++) {
const { sash: o } = this.sashItems[n], h = this.viewItems[n];
a += h.size;
const c = !(t[n] && m[n + 1]), f = !(i[n] && l[n + 1]);
if (c && f) {
const z = P(n, -1, -1), v = P(n + 1, this.viewItems.length), b = this.findFirstSnapIndex(z), p = this.findFirstSnapIndex(v), _ = typeof b == "number" && !this.viewItems[b].visible, L = typeof p == "number" && !this.viewItems[p].visible;
_ && l[n] && (a > 0 || this.startSnappingEnabled) ? o.state = A.Minimum : L && t[n] && (a < this.contentSize || this.endSnappingEnabled) ? o.state = A.Maximum : o.state = A.Disabled;
} else c && !f ? o.state = A.Minimum : !c && f ? o.state = A.Maximum : o.state = A.Enabled;
}
}
}
class C {
size;
constructor(e) {
this.size = e;
}
getPreferredSize() {
return this.size;
}
}
class ce {
proportion;
layoutService;
constructor(e, t) {
this.proportion = e, this.layoutService = t;
}
getPreferredSize() {
return this.proportion * this.layoutService.getSize();
}
}
class k {
getPreferredSize() {
}
}
class he {
minimumSize = 0;
maximumSize = Number.POSITIVE_INFINITY;
element;
priority;
snap;
layoutService;
layoutStrategy;
get preferredSize() {
return this.layoutStrategy.getPreferredSize();
}
set preferredSize(e) {
if (typeof e == "number")
this.layoutStrategy = new C(e);
else if (typeof e == "string") {
const t = e.trim();
if (Y(t, "%")) {
const i = Number(t.slice(0, -1)) / 100;
this.layoutStrategy = new ce(
i,
this.layoutService
);
} else if (Y(t, "px")) {
const i = Number(t.slice(0, -2));
this.layoutStrategy = new C(i);
} else if (typeof Number.parseFloat(t) == "number") {
const i = Number.parseFloat(t);
this.layoutStrategy = new C(i);
} else
this.layoutStrategy = new k();
} else
this.layoutStrategy = new k();
}
constructor(e, t) {
if (this.layoutService = e, this.element = t.element, this.snap = typeof t.snap == "boolean" ? t.snap : !1, this.minimumSize = this.snap ? 0 : typeof t.minimumSize == "number" ? t.minimumSize : 30, this.maximumSize = typeof t.maximumSize == "number" ? t.maximumSize : Number.POSITIVE_INFINITY, typeof t.preferredSize == "number")
this.layoutStrategy = new C(t.preferredSize);
else if (typeof t.preferredSize == "string") {
const i = t.preferredSize.trim();
if (Y(i, "%")) {
const r = Number(i.slice(0, -1)) / 100;
this.layoutStrategy = new ce(
r,
this.layoutService
);
} else if (Y(i, "px")) {
const r = Number(i.slice(0, -2));
this.layoutStrategy = new C(r);
} else if (typeof Number.parseFloat(i) == "number") {
const r = Number.parseFloat(i);
this.layoutStrategy = new C(r);
} else
this.layoutStrategy = new k();
} else
this.layoutStrategy = new k();
this.priority = t.priority ?? W.Normal;
}
layout(e) {
}
}
function Tt(s) {
const e = T(s, 4, 20), t = T(s, 1, 8);
document.documentElement.style.setProperty("--sash-size", `${e}px`), document.documentElement.style.setProperty(
"--sash-hover-size",
`${t}px`
), Et(e);
}
const jt = ["id"], Nt = /* @__PURE__ */ ue({
__name: "Allotment",
props: {
className: { default: "" },
defaultSizes: {},
id: {},
maxSize: { default: 1 / 0 },
minSize: { default: 30 },
proportionalLayout: { type: Boolean, default: !0 },
separator: { type: Boolean, default: !0 },
snap: { type: Boolean, default: !1 },
sizes: {},
vertical: { type: Boolean, default: !1 }
},
emits: ["change", "reset", "visibleChange", "dragStart", "dragEnd"],
setup(s, { expose: e, emit: t }) {
const i = s, r = t, l = O(), m = O(), a = O(!1), n = O(null), o = te(/* @__PURE__ */ new Map()), h = te(/* @__PURE__ */ new Map()), c = O(new pt()), f = O([]), z = O([]), v = O(null), b = xe();
_e("allotment", {
registerPane: (d, u, S) => {
o.set(d, u), h.set(d, S), a.value && X(() => {
N();
});
},
unregisterPane: (d) => {
o.delete(d), h.delete(d);
},
registerNonPane: (d, u) => {
o.set(d, u), h.set(d, {});
}
});
const p = Ve(() => {
const d = b.default?.({}) || [], u = (S) => {
const E = [];
for (const y of S)
Array.isArray(y.children) ? E.push(...u(y.children)) : y.type && E.push(y);
return E;
};
return u(d);
});
function _(d) {
const u = f.value?.[d];
return typeof u?.preferredSize != "number" ? !1 : (n.value?.resizeView(d, Math.round(u.preferredSize)), !0);
}
function L() {
if (r("reset"), !!n.value) {
n.value.distributeViewSizes();
for (let d = 0; d < f.value.length; d++)
_(d);
}
}
function I(d) {
n.value?.resizeViews(d);
}
e({
reset: L,
resize: I
});
function $() {
if (!l.value)
return;
let d = !0;
i.defaultSizes && o.size !== i.defaultSizes.length && (d = !1, console.warn(
`Expected ${i.defaultSizes.length} children based on defaultSizes but found ${o.size}`
));
const u = i.vertical ? l.value.clientHeight : l.value.clientWidth;
c.value.setSize(u);
let S = i.defaultSizes;
if (!i.defaultSizes && o.size > 0) {
const y = Math.floor(u / o.size);
S = Array.from({ length: o.size }, () => y), S[S.length - 1] += u - y * o.size, d = !0, z.value = p.value.map(
(g) => g.key
);
} else if (i.defaultSizes) {
const y = i.defaultSizes.reduce((g, w) => g + w, 0);
if (u > 0 && y > 0 && Math.abs(u - y) > 1) {
const g = u / y;
S = i.defaultSizes.map((w) => Math.round(w * g));
}
z.value = p.value.map(
(g) => g.key
);
}
f.value = [];
const E = {
orientation: i.vertical ? j.Vertical : j.Horizontal,
proportionalLayout: i.proportionalLayout,
...d && S && {
descriptor: {
size: S.reduce((y, g) => y + g, 0),
views: S.map((y, g) => {
const x = [...o.keys()][g], V = h.get(x), R = new he(c.value, {
element: document.createElement("div"),
minimumSize: V?.minSize ?? i.minSize,
maximumSize: V?.maxSize ?? i.maxSize,
priority: V?.priority ?? W.Normal,
...V?.preferredSize && {
preferredSize: V?.preferredSize
},
snap: V?.snap ?? i.snap
});
return f.value.push(R), {
container: [...o.values()][g],
size: y,
view: R
};
})
}
}
};
if (n.value = new Pt(
l.value,
E,
(y) => r("change", y),
(y) => r("dragStart", y),
(y) => r("dragEnd", y)
), n.value.on("sashDragStart", () => {
l.value?.classList.add("split-view-sash-dragging");
}), n.value.on("sashDragEnd", () => {
l.value?.classList.remove("split-view-sash-dragging");
}), n.value.on("sashchange", (y) => {
if (n.value) {
const g = p.value.map((w) => w.key);
for (const [w, x] of g.entries()) {
const V = h.get(x);
V?.visible !== void 0 && V.visible !== n.value.isViewVisible(w) && r("visibleChange", w, n.value.isViewVisible(w));
}
}
}), n.value?.on("sashreset", (y) => {
r("reset"), !_(y) && (_(y + 1) || n.value?.distributeViewSizes());
}), u > 0) {
n.value.layout(u);
for (let y = 0; y < f.value.length; y++)
_(y);
}
}
function N() {
if (!a.value || !n.value)
return;
const d = p.value.map((g) => g.key), u = [...z.value], S = d.filter((g) => !z.value.includes(g)), E = d.filter((g) => z.value.includes(g)), y = z.value.map((g, w) => ({ key: g, index: w, shouldExit: !d.includes(g) }));
for (let g = y.length - 1; g >= 0; g--)
y[g].shouldExit && (n.value.removeView(y[g].index), u.splice(y[g].index, 1), f.value.splice(y[g].index, 1));
for (const g of S) {
const w = h.get(g), x = new he(c.value, {
element: document.createElement("div"),
minimumSize: w?.minSize ?? i.minSize,
maximumSize: w?.maxSize ?? i.maxSize,
priority: w?.priority ?? W.Normal,
...w?.preferredSize && {
preferredSize: w?.preferredSize
},
snap: w?.snap ?? i.snap
}), V = d.indexOf(g);
n.value.addView(
o.get(g),
x,
be.Distribute,
V
), u.splice(V, 0, g), f.value.splice(V, 0, x);
}
for (; !nt(d, u); )
for (const [g, w] of d.entries()) {
const x = u.indexOf(w);
if (x !== g) {
n.value.moveView(
o.get(w),
x,
g
);
const V = u[x];
u.splice(x, 1), u.splice(g, 0, V);
const R = f.value[x];
f.value.splice(x, 1), f.value.splice(g, 0, R);
break;
}
}
for (const g of [...S, ...E]) {
const w = h.get(g), x = d.indexOf(g);
if (w) {
w.visible !== void 0 && n.value.isViewVisible(x) !== w.visible && n.value.setViewVisible(x, w.visible), w.preferredSize !== void 0 && f.value[x].preferredSize !== w.preferredSize && (f.value[x].preferredSize = w.preferredSize, _(x));
let V = !1;
w.minSize !== void 0 && f.value[x].minimumSize !== w.minSize && (f.value[x].minimumSize = w.minSize, V = !0), w.maxSize !== void 0 && f.value[x].maximumSize !== w.maxSize && (f.value[x].maximumSize = w.maxSize, V = !0), V && n.value.layout();
}
}
(S.length > 0 || y.some((g) => g.shouldExit)) && (z.value = d);
}
function G() {
l.value && (v.value = new ResizeObserver(() => {
if (l.value) {
const d = i.vertical ? l.value.clientHeight : l.value.clientWidth;
d > 0 && (n.value?.layout(d), c.value.setSize(d), a.value || (a.value = !0));
}
}), v.value.observe(l.value));
}
return me(() => {
ye && Tt(20), X(() => {
$(), G(), setTimeout(() => {
if (l.value && n.value) {
const d = i.vertical ? l.value.clientHeight : l.value.clientWidth;
d > 0 && n.value.layout(d);
}
}, 50);
});
}), K(p, () => {
X(() => {
N();
});
}, { deep: !0 }), K(() => i.vertical, (d) => {
n.value && (n.value.orientation = d ? j.Vertical : j.Horizontal, n.value.layout());
}), K(() => i.proportionalLayout, (d) => {
n.value && (n.value.proportionalLayout = d);
}), fe(() => {
v.value?.disconnect(), n.value?.dispose();
}), (d, u) => (de(), pe("div", {
id: d.id,
ref_key: "containerRef",
ref: l,
class: Z(["split-view", [
d.vertical ? "split-view-vertical" : "split-view-horizontal",
{ "split-view-separator-border": d.separator },
F(M).splitView,
d.vertical ? F(M).vertical : F(M).horizontal,
{ [F(M).separatorBorder]: d.separator },
d.className
]])
}, [
Ee("div", {
ref_key: "splitViewContainerRef",
ref: m,
class: Z(["split-view-container", [F(M).splitViewContainer]])
}, [
ve(d.$slots, "default", {}, void 0, !0)
], 2)
], 10, jt));
}
}), Ot = (s, e) => {
const t = s.__vccOpts || s;
for (const [i, r] of e)
t[i] = r;
return t;
}, At = /* @__PURE__ */ Ot(Nt, [["__scopeId", "data-v-e77a1ca4"]]), Ct = /* @__PURE__ */ ue({
__name: "Pane",
props: {
className: { default: "" },
maxSize: {},
minSize: {},
snap: { type: Boolean, default: !1 },
preferredSize: {},
priority: {},
visible: { type: Boolean, default: !0 }
},
setup(s, { expose: e }) {
const t = s, i = O(), r = De(), l = Le("allotment");
function m() {
return r?.vnode.key || `pane-${Math.random().toString(36).slice(2, 11)}`;
}
const a = m();
return me(() => {
l && i.value && l.registerPane(a, i.value, {
minSize: t.minSize,
maxSize: t.maxSize,
preferredSize: t.preferredSize,
priority: t.priority,
snap: t.snap,
visible: t.visible
});
}), K(() => t, (n) => {
l && i.value && l.registerPane(a, i.value, {
minSize: n.minSize,
maxSize: n.maxSize,
preferredSize: n.preferredSize,
priority: n.priority,
snap: n.snap,
visible: n.visible
});
}, { deep: !0 }), fe(() => {
l && l.unregisterPane(a);
}), e({
element: i
}), (n, o) => (de(), pe("div", {
ref_key: "paneRef",
ref: i,
class: Z(["split-view-view", [
n.visible && "split-view-view-visible",
F(M).splitViewView,
n.className
]])
}, [
ve(n.$slots, "default")
], 2));
}
});
export {
At as Allotment,
W as LayoutPriority,
pt as LayoutService,
j as Orientation,
Ct as Pane,
he as PaneView,
Pt as SplitView,
Tt as setSashSize
};