ant-design-x-vue-next/lib/bubble/Bubble.js

Ant Design X for Vue — community continuation aligned with @ant-design/x

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),de=require("ant-design-vue"),fe=require("../_util/hooks/use-x-component-config.js");require("../x-provider/index.js");const ve=require("./hooks/useTypedEffect.js"),ye=require("./hooks/useTypingConfig.js"),pe=require("./EditableContent.js"),me=require("./loading.js"),ge=require("./style/index.js"),be=require("./context.js"),xe=require("../x-provider/hooks/use-x-provider-context.js"),_e=t.defineComponent({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(A,{expose:X}){const a=A,{prefixCls:M,rootClassName:O,classNames:c={},styles:i={},avatar:d,placement:z="start",loading:g=!1,loadingRender:k,typing:Ne,content:D="",contentRender:b,messageRender:x,variant:H="filled",shape:E,onTypingComplete:Ce,header:_,footer:N,extra:C,onEditConfirm:V,onEditCancel:h,editable:Ve,streaming:he,footerPlacement:$e,status:K,extraInfo:U,_key:G,...J}=a,l=t.useSlots(),f=t.ref(D);t.watch(()=>a.content,e=>{f.value=e??""});const F=be.useBubbleContextInject(),v=t.computed(()=>{const e=t.unref(F)||{};return{key:G??e.key,status:K??e.status,extraInfo:U??e.extraInfo}}),I=t.ref(null),{direction:L,getPrefixCls:Q}=xe.default(),o=Q("bubble",M),r=fe.default("bubble"),[$,W,Y,R,P,Z]=ye.default(()=>a.typing,()=>f.value,()=>v.value),[u,p]=ve.default(f,$,W,Y,Z),T=t.ref(!1);t.watch(u,e=>{var n,s,y;(s=(n=t.unref(F))==null?void 0:n.onUpdate)==null||s.call(n),typeof e=="string"&&typeof f.value=="string"&&((y=a.onTyping)==null||y.call(a,e,f.value))}),t.watchEffect(()=>{var e;!p.value&&!a.loading&&!a.streaming?T.value||(T.value=!0,(e=a.onTypingComplete)==null||e.call(a)):T.value=!1});const q=t.computed(()=>a.footerPlacement?a.footerPlacement:(a.placement||"start")==="start"?"outer-start":"outer-end"),S=t.computed(()=>q.value.includes("inner")),[ee,te,ne]=ge.default(()=>o),oe=t.computed(()=>{var e;return[o,O,r.value.className,(e=r.value.classNames)==null?void 0:e.root,c.root,te.value,ne,`${o}-${z}`,{[`${o}-rtl`]:L.value==="rtl"},{[`${o}-typing`]:p.value&&!g&&!b&&!x&&!l.content&&!l.message&&!R.value&&P.value==="typing",[`${o}-fade-in`]:$.value&&P.value==="fade-in"}]}),ae=t.computed(()=>{var e;return{...typeof r.value.style=="object"?r.value.style:{},...((e=r.value.styles)==null?void 0:e.root)||{},...typeof a.style=="object"?a.style:{},...i.root||{}}}),le=e=>Array.isArray(e)&&e.every(t.isVNode),re=t.computed(()=>{const e=v.value,n=f.value;return l.avatar?l.avatar({content:n,info:e}):typeof d=="function"?d(n,e):t.isVNode(d)||le(d)?d:t.createVNode(de.Avatar,d,null)}),m=t.computed(()=>{const e=a.editable??!1;return typeof e=="boolean"?e:!!(e!=null&&e.editing)}),se=t.computed(()=>{const e=v.value,n=u.value;if(b)return b(n,e);if(x)return x(n,e);if(l.content)return l.content({content:n,info:e});if(l.message)return l.message({content:n,info:e});const s=n;return $.value&&P.value==="fade-in"&&typeof s=="string"&&p.value?t.createVNode("span",{class:"fade-in"},[s]):s}),w=()=>{if(m.value)return null;const e=v.value,n=l.footer?l.footer({content:u.value,info:e}):typeof N=="function"?N(u.value,e):N;return n?t.createVNode("div",{class:[`${o}-footer`,{[`${o}-footer-start`]:q.value.includes("start"),[`${o}-footer-end`]:q.value.includes("end")},r.value.classNames.footer,c.footer],style:{...r.value.styles.footer,...i.footer}},[n]):null},ue=t.computed(()=>{if(g)return l.loading?l.loading():k?k():t.createVNode(me.default,{prefixCls:o},null);if(m.value){const n=a.editable,s=typeof n=="object"&&n?n:void 0;return t.createVNode(pe.default,{prefixCls:o,content:String(f.value),okText:s==null?void 0:s.okText,cancelText:s==null?void 0:s.cancelText,onEditConfirm:y=>V==null?void 0:V(y),onEditCancel:()=>h==null?void 0:h()},null)}const e=t.createVNode(t.Fragment,null,[se.value,p.value&&t.toValue(R)]);return S.value?t.createVNode("div",{class:`${o}-content-with-footer`},[e,w()]):e}),ce=t.computed(()=>{var B,j;const e=t.createVNode("div",{style:{...r.value.styles.content,...i.content},class:[`${o}-content`,`${o}-content-${H}`,{[`${o}-content-${E}`]:E},{[`${o}-content-editing`]:m.value},r.value.classNames.content,c.content]},[t.toValue(ue)]),n=v.value,s=l.header?l.header({content:u.value,info:n}):typeof _=="function"?_(u.value,n):_,y=S.value?null:w();return t.createVNode("div",{class:[`${o}-body`,`${o}-content-wrapper`,(B=r.value.classNames)==null?void 0:B.body,c.body],style:{...((j=r.value.styles)==null?void 0:j.body)||{},...i.body||{}}},[s&&t.createVNode("div",{class:[`${o}-header`,r.value.classNames.header,c.header],style:{...r.value.styles.header,...i.header}},[s]),e,y])}),ie=()=>{if(g||m.value)return null;const e=v.value,n=l.extra?l.extra({content:u.value,info:e}):typeof C=="function"?C(u.value,e):C;return n?t.createVNode("div",{class:[`${o}-extra`,r.value.classNames.extra,c.extra],style:{...r.value.styles.extra,...i.extra}},[n]):null};return X({nativeElement:I}),()=>ee(t.createVNode("div",t.mergeProps({style:ae.value,class:t.toValue(oe)},J,{ref:I}),[(l.avatar||d)&&t.createVNode("div",{style:{...r.value.styles.avatar,...i.avatar},class:[`${o}-avatar`,r.value.classNames.avatar,c.avatar]},[t.toValue(re)]),t.toValue(ce),ie()]))}});exports.default=_e;