@aplus-frontend/ui
Version:
141 lines (140 loc) • 4.9 kB
JavaScript
import { defineComponent as D, ref as r, computed as I, onMounted as M, createElementBlock as p, openBlock as f, normalizeClass as a, unref as e, createVNode as d, createElementVNode as o, Transition as O, withCtx as c, withDirectives as V, toDisplayString as g, createTextVNode as A, Fragment as W, renderList as z, renderSlot as E, vShow as $, createCommentVNode as R } from "vue";
import "../../ap-field/index.mjs";
import { IconApLeftarrow as j, IconApMenu as G } from "@aplus-frontend/icon";
import "../../config-provider/index.mjs";
import { Tooltip as x, TypographyText as H } from "@aplus-frontend/antdv";
import { useNamespace as J } from "../../config-provider/hooks/use-namespace.mjs";
import { ApFieldText as K } from "../../ap-field/text/index.mjs";
const P = ["onClick"], ne = /* @__PURE__ */ D({
__name: "select-layout",
props: {
title: {},
request: {},
onSearch: {},
defaultFold: { type: Boolean, default: !1 },
defaultValue: { default: "" }
},
emits: ["onSelect", "afterEnter", "afterLeave"],
setup(N, { emit: w }) {
const { b: m, be: h, bem: u } = J("ap-select-layout"), s = N, y = w, C = r(), v = r(s.defaultFold), S = r(!s.defaultFold), k = r(), T = r(), b = r(), i = r(s.defaultValue), F = () => {
v.value = !v.value, k.value = !1, T.value = !1;
}, L = (t) => {
b.value = t, y("onSelect", t);
}, B = I(() => C.value?.filter((t) => s?.onSearch ? s.onSearch?.(t, i.value) : t?.name?.includes(i.value))), U = (t) => {
S.value = !0, y("afterEnter", t);
}, q = (t) => {
S.value = !1, y("afterLeave", t);
};
return M(() => {
s.request().then((t) => {
C.value = t;
let n = C.value?.filter(
(l) => l.name.includes(i.value)
);
L(n?.[0]);
});
}), (t, n) => (f(), p("div", {
class: a(e(m)())
}, [
d(O, {
mode: "out-in",
onAfterEnter: U,
onAfterLeave: q
}, {
default: c(() => [
V(o("div", {
class: a(e(m)("side"))
}, [
o("div", {
class: a(e(h)("side", "header"))
}, [
o("h3", null, g(s.title), 1),
o("div", {
class: a(e(u)("side", "header", "imgWrap"))
}, [
d(e(x), {
open: k.value,
"onUpdate:open": n[0] || (n[0] = (l) => k.value = l)
}, {
title: c(() => n[3] || (n[3] = [
A("收起")
])),
default: c(() => [
d(e(j), { onClick: F })
]),
_: 1
}, 8, ["open"])
], 2)
], 2),
o("div", {
class: a(e(h)("side", "body"))
}, [
o("div", {
class: a(e(u)("side", "body", "search"))
}, [
d(e(K), {
value: i.value,
"onUpdate:value": n[1] || (n[1] = (l) => i.value = l),
placeholder: "请输入"
}, null, 8, ["value"])
], 2),
o("div", {
class: a(e(u)("side", "body", "scroll"))
}, [
(f(!0), p(W, null, z(B.value, (l) => V((f(), p("div", {
key: l.value,
class: a(`${e(u)("side", "body", "scroll-item")} ${b.value === l ? "active" : ""}`),
onClick: (Q) => L(l)
}, [
E(t.$slots, "itemRender", { item: l }, () => [
d(e(H), {
ellipsis: { tooltip: l.name },
content: `${l.name}`
}, null, 8, ["ellipsis", "content"])
])
], 10, P)), [
[$, S.value]
])), 128))
], 2)
], 2)
], 2), [
[$, !v.value]
])
]),
_: 3
}),
o("div", {
class: a(e(m)("content"))
}, [
o("div", {
class: a(e(h)("content", "header"))
}, [
v.value ? (f(), p("div", {
key: 0,
class: a(e(u)("content", "header", "imgWrap"))
}, [
d(e(x), {
open: T.value,
"onUpdate:open": n[2] || (n[2] = (l) => T.value = l)
}, {
title: c(() => n[4] || (n[4] = [
A("展开")
])),
default: c(() => [
d(e(G), { onClick: F })
]),
_: 1
}, 8, ["open"])
], 2)) : R("", !0),
o("div", {
class: a(e(u)("content", "header", "title"))
}, g(b.value?.name), 3)
], 2),
E(t.$slots, "default")
], 2)
], 2));
}
});
export {
ne as default
};