@aplus-frontend/ui
Version:
131 lines (130 loc) • 4.68 kB
JavaScript
import { defineComponent as U, ref as z, computed as w, unref as t, watchEffect as V, createElementBlock as h, openBlock as y, normalizeClass as s, createCommentVNode as O, createElementVNode as T, normalizeStyle as F, createVNode as C } from "vue";
import "../config-provider/index.mjs";
import { UpOutlined as A, LeftOutlined as D, DownOutlined as I, RightOutlined as R } from "@ant-design/icons-vue";
import { useNamespace as $ } from "../config-provider/hooks/use-namespace.mjs";
const j = ["aria-valuenow", "aria-valuemin", "aria-valuemax"], K = /* @__PURE__ */ U({
name: "SplitBar",
__name: "SplitBar",
props: {
index: {},
active: { type: Boolean },
resizable: { type: Boolean },
startCollapsible: { type: Boolean },
endCollapsible: { type: Boolean },
onOffsetStart: { type: Function },
onOffsetUpdate: { type: Function },
onOffsetEnd: {},
onCollapse: { type: Function },
vertical: { type: Boolean },
ariaNow: {},
ariaMin: {},
ariaMax: {},
lazy: { type: Boolean },
containerSize: {}
},
setup(x) {
function g(o) {
return typeof o == "number" && !Number.isNaN(o) ? Math.round(o) : 0;
}
const e = x, { b: n, cssVar: L } = $("splitter-bar"), p = z(null), l = z(0), N = w(
() => e.vertical ? 0 : t(l)
), S = w(
() => e.vertical ? t(l) : 0
), B = (o) => {
e.resizable && o.currentTarget && (p.value = [o.pageX, o.pageY], e.onOffsetStart(e.index));
}, k = (o) => {
if (e.resizable && o.touches.length === 1) {
const a = o.touches[0];
p.value = [a.pageX, a.pageY], e.onOffsetStart(e.index);
}
}, X = (o) => {
const { containerSize: a, ariaMax: i, ariaMin: v, ariaNow: m } = e, f = a * m / 100, r = f + o, c = Math.max(0, a * v / 100), d = Math.max(
a,
a * i / 100
);
return Math.max(c, Math.min(d, r)) - f;
}, b = (o, a) => {
const i = X(
e.vertical ? a : o
);
l.value = i;
}, M = () => {
e.onOffsetUpdate(
e.index,
t(N),
t(S)
), l.value = 0;
};
V(
(o) => {
const a = t(p);
if (a) {
const i = (r) => {
const { pageX: c, pageY: d } = r, u = c - a[0], E = d - a[1];
e.lazy ? b(u, E) : e.onOffsetUpdate(e.index, u, E);
}, v = () => {
e.lazy && M(), p.value = null, e.onOffsetEnd();
}, m = (r) => {
if (r.touches.length === 1) {
const c = r.touches[0], d = c.pageX - a[0], u = c.pageY - a[1];
e.lazy ? b(d, u) : e.onOffsetUpdate(e.index, d, u);
}
}, f = () => {
e.lazy && M(), p.value = null, e.onOffsetEnd();
};
window.addEventListener("touchmove", m), window.addEventListener("touchend", f), window.addEventListener("mousemove", i), window.addEventListener("mouseup", v), o(() => {
window.removeEventListener("touchmove", m), window.removeEventListener("touchend", f), window.removeEventListener("mousemove", i), window.removeEventListener("mouseup", v);
});
}
},
{ flush: "post" }
);
const Y = w(
() => e.vertical ? A : D
), P = w(
() => e.vertical ? I : R
);
return (o, a) => (y(), h("div", {
class: s(t(n)()),
role: "separator",
"aria-valuenow": g(e.ariaNow),
"aria-valuemin": g(e.ariaMin),
"aria-valuemax": g(e.ariaMax)
}, [
e.lazy ? (y(), h("div", {
key: 0,
class: s([t(n)("preview"), { [t(n)("preview-active")]: !!l.value }]),
style: F(t(L)({ "preview-offset": `${l.value}px` }))
}, null, 6)) : O("", !0),
T("div", {
class: s([
t(n)("dragger"),
{ [t(n)("dragger-disabled")]: !o.resizable, [t(n)("dragger-active")]: o.active }
]),
onMousedown: B,
onTouchstart: k
}, null, 34),
o.startCollapsible ? (y(), h("div", {
key: 1,
class: s([t(n)("collapse-bar"), t(n)("collapse-bar-start")]),
onClick: a[0] || (a[0] = () => o.onCollapse(o.index, "start"))
}, [
C(t(Y), {
class: s([t(n)("collapse-icon"), t(n)("collapse-start")])
}, null, 8, ["class"])
], 2)) : O("", !0),
o.endCollapsible ? (y(), h("div", {
key: 2,
class: s([t(n)("collapse-bar"), t(n)("collapse-bar-end")]),
onClick: a[1] || (a[1] = () => o.onCollapse(o.index, "end"))
}, [
C(t(P), {
class: s([t(n)("collapse-icon"), t(n)("collapse-end")])
}, null, 8, ["class"])
], 2)) : O("", !0)
], 10, j));
}
});
export {
K as default
};