vexip-ui
Version:
A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good
112 lines (111 loc) • 3.97 kB
JavaScript
import "../icon/index.mjs";
import { defineComponent as _, ref as m, computed as s, watch as x } from "vue";
import { useProps as k, useNameHelper as D, useIcons as U, emitEvent as v } from "@vexip-ui/config";
import { useMoving as V } from "@vexip-ui/hooks";
import { splitProps as W } from "./props.mjs";
import X from "../icon/icon.mjs";
const J = _({
name: "Split",
components: {
Icon: X
},
props: W,
emits: ["update:value"],
setup(z, { emit: $ }) {
const t = k("split", z, {
value: {
default: 0.5,
validator: (e) => e > 0 && e < 1,
static: !0
},
min: 0.1,
max: 0.9,
vertical: !1,
noTransition: !1,
lazy: !1,
canFull: !1
}), u = D("split"), p = U(), l = m(t.value), a = m(0), g = m(!1), h = m(), n = m(), S = s(() => t.vertical ? "offsetHeight" : "offsetWidth"), r = s(() => t.vertical ? ["top", "bottom"] : ["left", "right"]), { target: T, moving: M } = V({
lazy: !0,
capture: !1,
onStart: (e, o) => {
if (a.value || !h.value || o.button > 0)
return !1;
const { min: c, max: f, vertical: b, lazy: d } = t, i = h.value[S.value], N = c <= 1 ? c : c / i, R = f <= 1 ? f : f / i;
e.outer = i, e.min = N, e.max = R, e.vertical = b, e.splitLazy = d, e.start = l.value * i, e.target = l.value, d && n.value && (n.value.style[r.value[0]] = `${l.value * 100}`, n.value.style.display = "block"), v(t.onMoveStart, l.value);
},
onMove: (e) => {
const o = e.outer, c = e.min, f = e.max, b = e.vertical ? e.deltaY : e.deltaX, d = e.start, i = Math.min(Math.max(c, (d + b) / o), f);
e.splitLazy ? (n.value && (n.value.style[r.value[0]] = `${i * 100}%`), e.target = i) : F(i), v(t.onMove, i);
},
onEnd: (e) => {
if (n.value && (n.value.style.display = ""), e.splitLazy) {
const o = e.target;
Math.abs(o - l.value) > 0.01 && y(), F(o);
}
v(t.onMoveEnd, l.value);
}
}), L = s(() => {
let e = "";
return a.value && (t.vertical ? e = a.value < 0 ? "top" : "bottom" : e = a.value < 0 ? "left" : "right"), {
[u.b()]: !0,
[u.bs("vars")]: !0,
[u.bm("inherit")]: t.inherit,
[u.bm(t.vertical ? "vertical" : "horizontal")]: !0,
[u.bm("moving")]: M.value,
[u.bm(`${e}-full`)]: !!e,
[u.bm("transition")]: g.value
};
}), P = s(() => ({
[r.value[1]]: a.value < 0 ? "0" : a.value > 0 ? "100%" : `${(1 - l.value) * 100}%`
})), w = s(() => ({
[r.value[0]]: a.value < 0 ? "100%" : a.value > 0 ? "0" : `${l.value * 100}%`
})), C = s(() => ({
[r.value[0]]: a.value < 0 ? "100%" : a.value > 0 ? "0" : `calc(${l.value * 100}% - var(${u.cv("handler-size")}) * 0.5)`
})), E = s(() => t.vertical ? [p.value.angleDown, p.value.angleUp] : [p.value.angleRight, p.value.angleLeft]);
x(
() => t.value,
(e) => {
e.toFixed(5) !== l.value.toFixed(5) && (l.value = e, y());
}
), x(l, (e) => {
n.value && (n.value.style[r.value[0]] = `${e * 100}%`);
}), x(a, (e) => {
if (y(), e) {
let o;
t.vertical ? o = e < 0 ? "top" : "bottom" : o = e < 0 ? "left" : "right", v(t.onFull, o);
} else
v(t.onReset);
});
function y() {
g.value = !t.noTransition && !M.value;
}
function I() {
g.value = !1;
}
function H(e) {
t.canFull && (a.value ? a.value = 0 : a.value = e);
}
function F(e) {
e.toFixed(5) !== l.value.toFixed(5) && (l.value = e, v(t.onChange, e), $("update:value", e));
}
return {
props: t,
nh: u,
className: L,
position: r,
leftPaneStyle: P,
rightPaneStyle: w,
triggerStyle: C,
fullIcons: E,
wrapper: h,
guide: n,
handler: T,
removeTransition: I,
handleFull: H
};
}
});
export {
J as default
};
//# sourceMappingURL=split.vue2.mjs.map