ant-design-x-vue-next
Version:
Ant Design X for Vue — community continuation aligned with @ant-design/x
260 lines (259 loc) • 7.97 kB
JavaScript
import { defineComponent as ge, useSlots as xe, ref as S, watch as K, computed as u, unref as O, watchEffect as be, createVNode as s, isVNode as U, Fragment as Ce, toValue as m, mergeProps as $e } from "vue";
import { Avatar as Ne } from "ant-design-vue";
import he from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import _e from "./hooks/useTypedEffect.mjs";
import Pe from "./hooks/useTypingConfig.mjs";
import Te from "./EditableContent.mjs";
import Fe from "./loading.mjs";
import Ie from "./style/index.mjs";
import { useBubbleContextInject as Re } from "./context.mjs";
import Ee from "../x-provider/hooks/use-x-provider-context.mjs";
const Je = /* @__PURE__ */ ge({
name: "AXBubble",
__name: "Bubble",
props: {
prefixCls: null,
rootClassName: null,
styles: null,
classNames: null,
avatar: null,
placement: null,
loading: {
type: Boolean
},
typing: null,
streaming: {
type: Boolean
},
content: null,
contentRender: {
type: Function
},
messageRender: {
type: Function
},
loadingRender: {
type: Function
},
status: null,
extraInfo: null,
variant: null,
shape: null,
_key: null,
onTyping: {
type: Function
},
onTypingComplete: null,
header: null,
footer: null,
extra: null,
footerPlacement: null,
editable: {
type: Boolean
},
onEditConfirm: {
type: Function
},
onEditCancel: {
type: Function
}
},
setup(q, {
expose: D
}) {
const o = q, {
prefixCls: G,
rootClassName: J,
// TODO: Vue's style is not necessarily an object, reconsider the design method in tsx.
// style = {},
classNames: c = {},
styles: f = {},
avatar: d,
placement: L = "start",
loading: b = !1,
loadingRender: k,
typing: Se,
content: M = "",
contentRender: C,
messageRender: $,
variant: Q = "filled",
shape: w,
onTypingComplete: ke,
header: N,
footer: h,
extra: _,
onEditConfirm: P,
onEditCancel: T,
editable: we,
streaming: Be,
footerPlacement: Ve,
status: W,
extraInfo: Y,
_key: Z,
...ee
} = o, a = xe(), v = S(M);
K(() => o.content, (e) => {
v.value = e ?? "";
});
const B = Re(), p = u(() => {
const e = O(B) || {};
return {
key: Z ?? e.key,
status: W ?? e.status,
extraInfo: Y ?? e.extraInfo
};
}), V = S(null), {
direction: te,
getPrefixCls: ne
} = Ee(), n = ne("bubble", G), l = he("bubble"), [F, oe, ae, A, I, le] = Pe(() => o.typing, () => v.value, () => p.value), [i, g] = _e(v, F, oe, ae, le), R = S(!1);
K(i, (e) => {
var t, r, y;
(r = (t = O(B)) == null ? void 0 : t.onUpdate) == null || r.call(t), typeof e == "string" && typeof v.value == "string" && ((y = o.onTyping) == null || y.call(o, e, v.value));
}), be(() => {
var e;
!g.value && !o.loading && !o.streaming ? R.value || (R.value = !0, (e = o.onTypingComplete) == null || e.call(o)) : R.value = !1;
});
const E = u(() => o.footerPlacement ? o.footerPlacement : (o.placement || "start") === "start" ? "outer-start" : "outer-end"), j = u(() => E.value.includes("inner")), [re, se, ue] = Ie(() => n), ie = u(() => {
var e;
return [n, J, l.value.className, (e = l.value.classNames) == null ? void 0 : e.root, c.root, se.value, ue, `${n}-${L}`, {
[`${n}-rtl`]: te.value === "rtl"
}, {
[`${n}-typing`]: g.value && !b && !C && !$ && !a.content && !a.message && !A.value && I.value === "typing",
[`${n}-fade-in`]: F.value && I.value === "fade-in"
}];
}), ce = u(() => {
var e;
return {
...typeof l.value.style == "object" ? l.value.style : {},
...((e = l.value.styles) == null ? void 0 : e.root) || {},
...typeof o.style == "object" ? o.style : {},
...f.root || {}
};
}), fe = (e) => Array.isArray(e) && e.every(U), de = u(() => {
const e = p.value, t = v.value;
return a.avatar ? a.avatar({
content: t,
info: e
}) : typeof d == "function" ? d(t, e) : U(d) || fe(d) ? d : s(Ne, d, null);
}), x = u(() => {
const e = o.editable ?? !1;
return typeof e == "boolean" ? e : !!(e != null && e.editing);
}), ve = u(() => {
const e = p.value, t = i.value;
if (C)
return C(t, e);
if ($)
return $(t, e);
if (a.content)
return a.content({
content: t,
info: e
});
if (a.message)
return a.message({
content: t,
info: e
});
const r = t;
return F.value && I.value === "fade-in" && typeof r == "string" && g.value ? s("span", {
class: "fade-in"
}, [r]) : r;
}), X = () => {
if (x.value) return null;
const e = p.value, t = a.footer ? a.footer({
content: i.value,
info: e
}) : typeof h == "function" ? h(i.value, e) : h;
return t ? s("div", {
class: [`${n}-footer`, {
[`${n}-footer-start`]: E.value.includes("start"),
[`${n}-footer-end`]: E.value.includes("end")
}, l.value.classNames.footer, c.footer],
style: {
...l.value.styles.footer,
...f.footer
}
}, [t]) : null;
}, pe = u(() => {
if (b)
return a.loading ? a.loading() : k ? k() : s(Fe, {
prefixCls: n
}, null);
if (x.value) {
const t = o.editable, r = typeof t == "object" && t ? t : void 0;
return s(Te, {
prefixCls: n,
content: String(v.value),
okText: r == null ? void 0 : r.okText,
cancelText: r == null ? void 0 : r.cancelText,
onEditConfirm: (y) => P == null ? void 0 : P(y),
onEditCancel: () => T == null ? void 0 : T()
}, null);
}
const e = s(Ce, null, [ve.value, g.value && m(A)]);
return j.value ? s("div", {
class: `${n}-content-with-footer`
}, [e, X()]) : e;
}), ye = u(() => {
var z, H;
const e = s("div", {
style: {
...l.value.styles.content,
...f.content
},
class: [`${n}-content`, `${n}-content-${Q}`, {
[`${n}-content-${w}`]: w
}, {
[`${n}-content-editing`]: x.value
}, l.value.classNames.content, c.content]
}, [m(pe)]), t = p.value, r = a.header ? a.header({
content: i.value,
info: t
}) : typeof N == "function" ? N(i.value, t) : N, y = j.value ? null : X();
return s("div", {
class: [`${n}-body`, `${n}-content-wrapper`, (z = l.value.classNames) == null ? void 0 : z.body, c.body],
style: {
...((H = l.value.styles) == null ? void 0 : H.body) || {},
...f.body || {}
}
}, [r && s("div", {
class: [`${n}-header`, l.value.classNames.header, c.header],
style: {
...l.value.styles.header,
...f.header
}
}, [r]), e, y]);
}), me = () => {
if (b || x.value) return null;
const e = p.value, t = a.extra ? a.extra({
content: i.value,
info: e
}) : typeof _ == "function" ? _(i.value, e) : _;
return t ? s("div", {
class: [`${n}-extra`, l.value.classNames.extra, c.extra],
style: {
...l.value.styles.extra,
...f.extra
}
}, [t]) : null;
};
return D({
nativeElement: V
}), () => re(s("div", $e({
style: ce.value,
class: m(ie)
}, ee, {
ref: V
}), [(a.avatar || d) && s("div", {
style: {
...l.value.styles.avatar,
...f.avatar
},
class: [`${n}-avatar`, l.value.classNames.avatar, c.avatar]
}, [m(de)]), m(ye), me()]));
}
});
export {
Je as default
};