@aplus-frontend/ui
Version:
129 lines (128 loc) • 4.35 kB
JavaScript
import { defineComponent as j, ref as q, unref as a, computed as _, createBlock as y, openBlock as r, withCtx as g, createElementVNode as G, normalizeClass as b, normalizeStyle as J, createElementBlock as p, createCommentVNode as h, Fragment as d, renderList as k, createVNode as K, mergeProps as Q, resolveDynamicComponent as T } from "vue";
import { useItems as X } from "./hooks/useItems.mjs";
import "../resize-observer/index.mjs";
import { useSizes as Y } from "./hooks/useSizes.mjs";
import { useResizable as Z } from "./hooks/useResizable.mjs";
import { useResize as x } from "./hooks/useResize.mjs";
import "../config-provider/index.mjs";
import "./Panel.vue.mjs";
import "./SplitBar.vue.mjs";
import { omit as ee } from "lodash-unified";
import { useNamespace as te } from "../config-provider/hooks/use-namespace.mjs";
import ae from "../resize-observer/index.vue.mjs";
import oe from "./Panel.vue2.mjs";
import se from "./SplitBar.vue2.mjs";
const Ce = /* @__PURE__ */ j({
name: "Splitter",
__name: "Splitter",
props: {
prefixCls: {},
className: {},
style: {},
rootClassName: {},
layout: { default: "horizontal" },
onResizeStart: {},
onResize: {},
onResizeEnd: {},
lazy: { type: Boolean }
},
setup(E) {
const n = E, { b: c } = te("splitter"), i = X(), l = q(), N = (e) => {
const { offsetWidth: s, offsetHeight: o } = e.target, t = n.layout === "vertical" ? o : s;
l.value !== 0 && (l.value = t);
}, [
I,
z,
v,
O,
P,
M
] = Y(i, l), m = Z(i, z, !1), [B, U, $, w, C] = x(
i,
m,
v,
l,
M,
!1
), V = (e) => {
B(e), n.onResizeStart?.(a(z));
}, A = (e, s) => {
const o = U(e, s);
n.onResize?.(o);
}, D = () => {
$(), n.onResizeEnd?.(a(z));
}, F = (e, s) => {
const o = w(e, s);
n.onResize?.(o), n.onResizeEnd?.(o);
}, H = _(() => [c(), n.className, c(n.layout)]), R = _(() => {
const e = [];
let s = 0;
for (let o = 0; o < i.value.length; o += 1)
s += a(v)[o], e.push(s);
return e;
}), f = (e) => {
const s = a(R), o = a(O), t = a(P);
return {
minStart: (s[e - 1] || 0) + o[e],
minEnd: (s[e + 1] || 100) - t[e + 1],
maxStart: (s[e - 1] || 0) + t[e],
maxEnd: (s[e + 1] || 100) - o[e + 1]
};
};
return (e, s) => (r(), y(a(ae), { onResize: N }, {
default: g(() => [
G("div", {
style: J(e.style),
class: b(H.value)
}, [
(r(!0), p(d, null, k(a(i), (o, t) => (r(), p(d, { key: t }, [
K(oe, Q({ ref_for: !0 }, a(ee)(o, "_child"), {
size: a(I)[t]
}), {
default: g(() => [
(r(!0), p(d, null, k(o._child, (u, S) => (r(), y(T(u), { key: S }))), 128))
]),
_: 2
}, 1040, ["size"]),
a(m)[t] ? (r(), y(se, {
key: 0,
lazy: e.lazy,
index: t,
active: a(C) === t,
vertical: e.layout === "vertical",
resizable: a(m)[t].resizable,
"aria-now": R.value[t] * 100,
"aria-min": Math.max(
f(t).minStart,
f(t).minEnd
) * 100,
"aria-max": Math.min(
f(t).maxStart,
f(t).maxEnd
) * 100,
"start-collapsible": a(m)[t].startCollapsible,
"end-collapsible": a(m)[t].endCollapsible,
"container-size": l.value || 0,
onOffsetStart: V,
onOffsetUpdate: (u, S, L) => {
let W = e.layout === "vertical" ? L : S;
A(u, W);
},
onOffsetEnd: D,
onCollapse: F
}, null, 8, ["lazy", "index", "active", "vertical", "resizable", "aria-now", "aria-min", "aria-max", "start-collapsible", "end-collapsible", "container-size", "onOffsetUpdate"])) : h("", !0)
], 64))), 128)),
typeof a(C) == "number" ? (r(), p("div", {
key: 0,
"aria-hidden": "",
class: b([a(c)("mask"), a(c)(`mask-${e.layout}`)])
}, null, 2)) : h("", !0)
], 6)
]),
_: 1
}));
}
});
export {
Ce as default
};