ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
257 lines (256 loc) • 7.29 kB
JavaScript
import { defineComponent as ft, toRef as g, useAttrs as dt, useSlots as ut, computed as R, mergeProps as H, ref as h, watch as P, watchPostEffect as yt, onWatcherCleanup as vt, unref as o, nextTick as Ct, createVNode as d } from "vue";
import { c as gt } from "../chunks/helper-chunk.mjs";
import { b as F } from "../chunks/module-chunk.mjs";
import { useEventCallback as ht } from "../_util/hooks/use-event-callback.mjs";
import xt from "../_util/pick-attrs.mjs";
import "../x-provider/index.mjs";
import St from "./Bubble.mjs";
import Nt from "./BubbleSystem.mjs";
import Rt from "./BubbleDivider.mjs";
import Pt from "./hooks/useDisplayData.mjs";
import It from "./hooks/useListData.mjs";
import Tt from "./style/index.mjs";
import L from "../_util/hooks/use-state.mjs";
import { BubbleContextProvider as Et } from "./context.mjs";
import $t from "../x-provider/hooks/use-x-provider-context.mjs";
const bt = 1, Yt = /* @__PURE__ */ ft({
name: "AXBubbleList",
inheritAttrs: !1,
__name: "BubbleList",
props: {
prefixCls: {},
rootClassName: {},
items: {},
autoScroll: {
type: Boolean,
default: !0
},
roles: {},
role: {},
onScroll: {},
classNames: {
default: () => ({})
},
styles: {
default: () => ({})
}
},
setup(t, {
expose: G
}) {
const J = gt(t, ["prefixCls", "rootClassName", "items", "autoScroll", "roles", "role", "onScroll", "classNames", "styles", "class", "style"]);
g(t, "class"), g(t, "role"), g(t, "roles"), g(t, "items"), g(t, "prefixCls");
const Q = dt(), s = ut(), Y = R(() => xt(H(J, Q), {
attr: !0,
aria: !0
})), U = h(t.items), z = h(t.roles ?? t.role);
P(() => t.items, () => {
U.value = t.items;
}), P(() => [t.roles, t.role], ([e, l]) => {
z.value = e ?? l;
});
const X = h(null), c = h(null), x = h({}), {
getPrefixCls: Z
} = $t(), j = Z("bubble", t.prefixCls), S = `${j}-list`, [p, _, tt] = Tt(j), [et, K] = L(!1);
yt(() => {
K(!0), vt(() => {
K(!1);
});
});
const st = It(U, z), [u, ot] = Pt(st), [I, T] = L(!0), [E, M] = L(0), lt = (e) => {
var r;
const l = e.target;
T(l.scrollHeight - Math.abs(l.scrollTop) - l.clientHeight <= bt), (r = t.onScroll) == null || r.call(t, e);
};
P([E, c, I], () => {
t.autoScroll && o(c) && o(I) && Ct(() => {
var e;
(e = o(c)) == null || e.scrollTo({
top: o(c).scrollHeight
});
});
}), P(() => o(u).length, () => {
var e;
if (t.autoScroll) {
const l = (e = o(u)[o(u).length - 2]) == null ? void 0 : e.key, r = o(x)[l];
if (r && o(c)) {
const {
nativeElement: a
} = r, {
top: f = 0,
bottom: i = 0
} = (a == null ? void 0 : a.getBoundingClientRect()) ?? {}, {
top: m,
bottom: y
} = o(c).getBoundingClientRect();
f < y && i > m && (M(o(E) + 1), T(!0));
}
}
});
const at = ht(() => {
t.autoScroll && M(o(E) + 1);
}), nt = R(() => ({
onUpdate: at
})), rt = R(() => F(S, t.rootClassName, t.class, t.classNames.root, _.value, tt, {
[`${S}-reach-end`]: I.value
})), ct = R(() => ({
...typeof t.style == "object" ? t.style : {},
...t.styles.root || {}
}));
return G({
nativeElement: X,
scrollBoxNativeElement: c,
scrollTo: ({
key: e,
top: l,
offset: r,
behavior: a = "smooth",
block: f
}) => {
const i = o(c);
if (!i) return;
const m = l ?? r;
if (typeof m == "number") {
i.scrollTo({
top: m,
behavior: a
});
return;
}
if (m === "bottom") {
i.scrollTo({
top: i.scrollHeight,
behavior: a
});
return;
}
if (m === "top") {
i.scrollTo({
top: 0,
behavior: a
});
return;
}
if (e !== void 0) {
const y = o(x)[e];
if (y) {
const N = o(u).findIndex(($) => $.key === e);
T(N === o(u).length - 1), y.nativeElement.scrollIntoView({
behavior: a,
block: f
});
}
}
}
}), () => p(d(Et, {
value: nt.value
}, {
default: () => [d("div", H(Y.value, {
class: rt.value,
style: ct.value,
ref: X
}), [d("div", {
class: F(`${S}-scroll-box`, t.classNames.scroll),
style: t.styles.scroll || {},
ref: c,
onScroll: lt
}, [d("div", {
class: `${S}-scroll-content`
}, [o(u).map(({
key: e,
status: l,
extraInfo: r,
role: a,
onTypingComplete: f,
classNames: i = {},
styles: m = {},
class: y,
className: N,
style: $,
...n
}) => {
var O, W, k, q;
const v = {
key: e,
status: l,
extraInfo: r,
role: a,
...n
}, {
root: it,
bubble: Bt,
system: Vt,
divider: At,
...b
} = i, {
root: mt,
bubble: Dt,
system: wt,
divider: Ht,
...B
} = m, V = {
avatar: s.avatar ? () => {
var C;
return (C = s.avatar) == null ? void 0 : C.call(s, {
item: v
});
} : n.avatar,
header: ((O = s.header) == null ? void 0 : O.call(s, {
item: v
})) ?? n.header,
footer: ((W = s.footer) == null ? void 0 : W.call(s, {
item: v
})) ?? n.footer,
extra: ((k = s.extra) == null ? void 0 : k.call(s, {
item: v
})) ?? n.extra,
loadingRender: s.loading ? () => s.loading({
item: v
}) : n.loadingRender,
content: ((q = s.message) == null ? void 0 : q.call(s, {
item: v
})) ?? n.content,
typing: et.value ? n.typing : !1,
onTypingComplete: () => {
f == null || f(), ot(e);
}
}, A = (C) => {
C ? x.value[e] = C : delete x.value[e];
}, D = it || y || N, w = mt || $;
return a === "divider" ? d(Rt, {
key: e,
content: V.content,
class: D || t.classNames.divider,
style: w || t.styles.divider,
classNames: b,
styles: B,
ref: A
}, null) : a === "system" ? d(Nt, {
key: e,
content: V.content,
variant: n.variant,
shape: n.shape,
class: D || t.classNames.system,
style: w || t.styles.system,
classNames: b,
styles: B,
ref: A
}, null) : d(St, H({
key: e
}, n, V, {
_key: e,
status: l,
extraInfo: r,
class: D || t.classNames.bubble,
style: w || t.styles.bubble,
classNames: b,
styles: B,
ref: A
}), null);
})])])])]
}));
}
});
export {
Yt as default
};