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