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