@progress/kendo-vue-layout
Version:
241 lines (240 loc) • 7.22 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { defineComponent as b, createVNode as D } from "vue";
import { SplitterPane as E } from "./SplitterPane.mjs";
import { SplitterBar as T } from "./SplitterBar.mjs";
import { classNames as $, validatePackage as y, isRtl as R, templateRendering as k, getListeners as w } from "@progress/kendo-vue-common";
import { packageMetadata as B } from "../package-metadata.mjs";
const C = {
collapsible: !1,
collapsed: !1,
resizable: !0,
scrollable: !0
}, N = 150, Y = /* @__PURE__ */ b({
name: "KendoSplitter",
props: {
orientation: {
type: String,
default: "horizontal",
validator: function(e) {
return ["vertical", "horizontal"].includes(e);
}
},
panes: Array,
defaultPanes: Array
},
mounted() {
this.currentRtl = R(this.$el);
},
emits: {
change: (e) => !0
},
computed: {
isControlledState() {
return this.$props.panes !== void 0;
},
computedPanes() {
return this.isControlledState ? this.$props.panes : this.currentPanes;
}
},
created() {
y(B);
},
data() {
return {
currentRtl: !1,
isDragging: !1,
dragIndex: void 0,
startTime: 0,
originalX: 0,
originalY: 0,
originalPrevSize: 0,
originalNextSize: 0,
currentPanes: this.$props.defaultPanes || []
};
},
render() {
const e = this.panesOptions(), n = $("k-widget", "k-splitter", "k-splitter-flex", `k-splitter-${this.orientation}`);
return this.validatePanes(e), D("div", {
class: n
}, [function(s) {
return s.map(function(t, r) {
const a = k.call(this, t.content, w.call(this));
let o;
const h = r * 2, l = h + 1;
if (r + 1 < s.length) {
const m = s[r + 1];
o = D(T, {
key: l,
index: r,
orientation: this.orientation,
prev: t,
next: m,
onDrag: this.onBarDragResize,
onToggle: this.onBarToggle,
onKeyboardresize: this.onBarKeyboardResize,
isRtl: this.currentRtl
}, null);
}
return [D(E, {
key: h,
containsSplitter: t.containsSplitter,
size: t.size,
min: t.min,
max: t.max,
resizable: t.resizable,
collapsible: t.collapsible,
collapsed: t.collapsed,
scrollable: t.scrollable,
keepMounted: t.keepMounted,
content: a
}, null), o];
}, this);
}.call(this, e)]);
},
methods: {
validatePanes(e) {
if (!e.filter((i) => i.size === void 0).length)
throw new Error("The Splitter should have at least one pane without a set size.");
},
mapPaneOptions(e) {
const n = this.orientation, i = [];
for (let s = 0; s < e.length; s++) {
let t = !1;
this.isDragging && this.dragIndex !== void 0 && (t = this.dragIndex === s || this.dragIndex + 1 === s), i.push({
...C,
orientation: n,
overlay: t,
...e[s]
});
}
return i;
},
onBarToggle(e, n) {
const s = this.panesOptions().map((t, r) => {
const a = t;
return r === e ? {
...a,
collapsed: !t.collapsed
} : {
...a
};
});
this.$emit("change", {
newState: s,
isLast: !0,
nativeEvent: n
});
},
onBarDragResize(e, n, i, s, t) {
const r = (/* @__PURE__ */ new Date()).getTime(), {
pageX: a,
pageY: o
} = e, {
prevElement: h,
nextElement: l
} = this.surroudingPanes(n);
if (!h || !l)
return;
if (s) {
this.isDragging = !0, this.dragIndex = i, this.startTime = r, this.originalX = a, this.originalY = o, this.originalPrevSize = this.elementSize(h), this.originalNextSize = this.elementSize(l);
return;
}
const {
originalPrevSize: p,
originalNextSize: m,
startTime: c,
originalX: d,
originalY: z
} = this.$data;
if (!s && r - c < N) {
t && this.resetDragState();
return;
}
let u;
this.orientation === "vertical" ? u = o - z : this.currentRtl ? u = d - a : u = a - d, this.resize(i, i + 1, p, m, u, t, e), t && this.resetDragState();
},
onBarKeyboardResize(e, n, i, s) {
const {
prevElement: t,
nextElement: r
} = this.surroudingPanes(e), a = this.elementSize(t), o = this.elementSize(r);
this.resize(n, n + 1, a, o, i, !0, s);
},
surroudingPanes(e) {
return {
prevElement: e.previousElementSibling,
nextElement: e.nextElementSibling
};
},
containerSize() {
return this.$el ? this.elementSize(this.$el, !0) : 0;
},
isPercent(e) {
return /%$/.test(e);
},
toPixels(e, n) {
let i = parseInt(e, 10);
return this.isPercent(e) && (i = n * i / 100), i;
},
panesOptions() {
return this.mapPaneOptions(this.computedPanes);
},
resetDragState() {
this.isDragging = !1, this.dragIndex = void 0, this.startTime = 0, this.originalX = 0, this.originalY = 0, this.originalPrevSize = 0, this.originalNextSize = 0;
},
elementSize(e, n) {
const i = n ? "client" : "offset";
return this.orientation === "vertical" ? e[`${i}Height`] : e[`${i}Width`];
},
clamp(e, n, i) {
return Math.min(n, Math.max(e, i));
},
fixedSize(e) {
return e && e.length > 0;
},
resize(e, n, i, s, t, r, a) {
const o = this.panesOptions(), h = o[e], l = o[n], p = i + s, m = this.containerSize(), c = (g) => this.toPixels(g, m), d = {
index: e,
initialSize: i,
min: c(h.min) || p - c(l.max) || 0,
max: c(h.max) || p - c(l.min) || p
}, z = {
index: n,
initialSize: s,
min: c(l.min) || p - c(h.max) || 0,
max: c(l.max) || p - c(h.min) || p
}, u = (g, S) => {
const f = o[g.index], O = this.clamp(g.min, g.max, g.initialSize + S);
return this.isPercent(f.size || "") ? 100 * O / m + "%" : O + "px";
};
let P, x;
this.fixedSize(h.size) && this.fixedSize(l.size) ? (P = u(d, t), x = u(z, -t)) : l.collapsible || this.fixedSize(l.size) ? x = u(z, -t) : P = u(d, t);
const v = o.map((g, S) => {
const f = g;
return S === e ? {
...f,
size: P
} : S === n ? {
...f,
size: x
} : {
...f
};
});
this.panesDuringOnChange = v, this.isControlledState || (this.currentPanes = v), this.$emit("change", {
newState: v,
isLast: r,
nativeEvent: a
}), this.panesDuringOnChange = void 0;
}
}
});
export {
Y as Splitter
};