@vunk/plus 1.16.1 → 1.16.2

package/components/bubble-list/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),m=require("@vunk/plus/components/bubble-templates"),$=require("element-plus"),g=require("@vunk/plus/vue-virtual-scroller"),R=require("@element-plus/icons-vue"),x=require("@vueuse/core"),w=require("@vunk/plus/components/scrollbar"),B=require("@vunk/plus/element/bubble"),V=require("../_plugin-vue_export-helper-BHFhmbuH.js"),z=require("@vunk/shared/function"),P=require("@vunk/plus/components/agent-chat-provider"),F={},N={xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",version:"1.1",width:"704",height:"704",viewBox:"0 0 704 704"};function q(l,i){return e.openBlock(),e.createElementBlock("svg",N,[...i[0]||(i[0]=[e.createStaticVNode('<defs><filter id="master_svg0_62_10054" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-0.030120481927710843" y="-0.030120481927710843" width="1.0602409638554218" height="1.0602409638554218"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur"></feGaussianBlur></filter><linearGradient id="master_svg1_62_10082" x1="0.5" y1="-0.13192443549633026" x2="0.42319029569625854" y2="1.368432641029358"><stop offset="9.145302325487137%" stop-color="currentColor" stop-opacity="1"></stop><stop offset="13.636428117752075%" stop-color="currentColor" stop-opacity="0.07539999485015869"></stop><stop offset="16.968481242656708%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g transform="matrix(0,1,-1,0,704,-664)" filter="url(#master_svg0_62_10054)"><path d="M1016,684C1199.359,684,1348,535.359,1348,352C1348,168.641,1199.359,20,1016,20C832.641,20,684,168.641,684,352C684,535.359,832.641,684,1016,684ZM1016,32C1192.731,32,1336,175.269,1336,352C1336,528.731,1192.731,672,1016,672C839.269,672,696,528.731,696,352C696,175.269,839.269,32,1016,32Z" fill-rule="evenodd" fill="url(#master_svg1_62_10082)" fill-opacity="1"></path></g>',2)])])}const A=V._export_sfc(F,[["render",q]]),E={class:"vk-bubble-list-wrapper"},I=e.defineComponent({__name:"index",props:{list:{type:Array,default:()=>[]},autoScroll:{type:Boolean,default:!0},autoScrollThreshold:{type:Number,default:200},maxHeight:{type:String,default:""},alwaysShowScrollbar:{type:Boolean,default:!1},backButtonThreshold:{type:Number,default:80},showBackButton:{type:Boolean,default:!0},backButtonPosition:{type:Object,default:()=>({bottom:"20px",left:"calc(50% - 19px)"})},btnLoading:{type:Boolean,default:!0},btnColor:{type:String,default:"#409EFF"},btnIconSize:{type:Number,default:24},scrollbarAppendTo:{type:null,default:void 0},virtual:{type:Boolean,default:!1},keyField:{type:String,default:"key"}},emits:{complete:null},setup(l,{expose:i}){const r=l,n=e.ref(),a=e.ref(),v=e.ref();function u(){document.documentElement.style.setProperty("--el-bubble-list-max-height",r.maxHeight||"100%"),document.documentElement.style.setProperty("--el-bubble-list-btn-size",`${r.btnIconSize}px`)}e.onMounted(()=>{u(),r.virtual&&e.nextTick(()=>{const o=n.value?.wrapRef;o&&(v.value=o)}),setTimeout(p)}),e.watch(()=>[r.maxHeight,r.btnIconSize],()=>u());const s=e.ref(),S=e.computed(()=>r.showBackButton&&s.value!==void 0&&s.value>r.backButtonThreshold);function p(){const o=n.value?.wrapRef;if(o)return s.value=o.scrollHeight-o.scrollTop-o.clientHeight,s.value}function h(){if(r.virtual){a.value?.scrollToBottom();return}n.value?.scrollToBottom()}function C(){if(r.virtual){a.value?.scrollToItem(0);return}n.value?.scrollToTop()}function T(o){if(r.virtual){a.value?.scrollToItem(o),requestAnimationFrame(()=>{requestAnimationFrame(()=>{a.value?.scrollToItem(o)})});return}const c=n.value?.wrapRef;if(!c)return;const b=c.querySelectorAll(".el-bubble");if(o>=b.length)return;const t=b[o],d=c.getBoundingClientRect(),y=t.getBoundingClientRect();c.scrollTo({top:y.top-d.top+c.scrollTop,behavior:"smooth"})}const k=e.ref();return e.onMounted(()=>{e.nextTick(()=>{k.value=n.value?.wrapRef?.firstElementChild})}),r.autoScroll&&x.useResizeObserver(k,()=>{const o=p();o!==void 0&&o>r.autoScrollThreshold||h()}),i({scrollToTop:C,scrollToBottom:h,scrollToBubble:T}),(o,c)=>{const b=e.resolveComponent("el-icon");return e.openBlock(),e.createElementBlock("div",E,[l.virtual?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vk-bubble-list-virtual-host",style:e.normalizeStyle({height:l.maxHeight||"100%"})},[e.createVNode(e.unref(w.VkScrollbar),{ref_key:"scrollbarRef",ref:n,class:"vk-bubble-list-virtual-scrollbar",always:l.alwaysShowScrollbar,"hide-after":800,onScroll:p},{default:e.withCtx(()=>[v.value?(e.openBlock(),e.createBlock(e.unref(g.DynamicScroller),{key:0,ref_key:"scrollerRef",ref:a,items:l.list,"min-item-size":54,"key-field":l.keyField,"page-mode":!0,"scroll-parent":v.value,class:"vk-bubble-list-dynamic-scroller"},{default:e.withCtx(({item:t,index:d,active:y})=>[e.createVNode(e.unref(g.DynamicScrollerItem),{item:t,active:y,"data-index":d,class:"vk-bubble-list-virtual-item"},{default:e.withCtx(()=>[e.createVNode(e.unref(B.Bubble),{content:t.content,placement:t.placement,loading:t.loading,shape:t.shape,variant:t.variant,"is-markdown":t.isMarkdown,"is-fog":t.isFog,typing:t.typing,"max-width":t.maxWidth,avatar:t.avatar,"avatar-size":t.avatarSize,"avatar-gap":t.avatarGap,"avatar-shape":t.avatarShape,"avatar-src-set":t.avatarSrcSet,"avatar-alt":t.avatarAlt,"avatar-fit":t.avatarFit,"no-style":t.noStyle,class:e.normalizeClass({[`is-${t.role}`]:!0})},e.createSlots({_:2},[o.$slots.avatar?{name:"avatar",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"avatar",{item:t})]),key:"0"}:void 0,o.$slots.header?{name:"header",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{item:t})]),key:"1"}:void 0,o.$slots.content?{name:"content",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"content",{item:t})]),key:"2"}:void 0,o.$slots.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"footer",{item:t})]),key:"3"}:void 0,o.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"loading",{item:t})]),key:"4"}:void 0]),1032,["content","placement","loading","shape","variant","is-markdown","is-fog","typing","max-width","avatar","avatar-size","avatar-gap","avatar-shape","avatar-src-set","avatar-alt","avatar-fit","no-style","class"])]),_:2},1032,["item","active","data-index"])]),_:3},8,["items","key-field","scroll-parent"])):e.createCommentVNode("",!0)]),_:3},8,["always"])],4)):(e.openBlock(),e.createBlock(e.unref(w.VkScrollbar),{key:1,ref_key:"scrollbarRef",ref:n,class:"vk-bubble-list","append-to":l.scrollbarAppendTo,always:l.alwaysShowScrollbar,"hide-after":800,onScroll:p},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.list,(t,d)=>(e.openBlock(),e.createBlock(e.unref(B.Bubble),{key:t.key||d,content:t.content,placement:t.placement,loading:t.loading,shape:t.shape,variant:t.variant,"is-markdown":t.isMarkdown,"is-fog":t.isFog,typing:t.typing,"max-width":t.maxWidth,avatar:t.avatar,"avatar-size":t.avatarSize,"avatar-gap":t.avatarGap,"avatar-shape":t.avatarShape,"avatar-src-set":t.avatarSrcSet,"avatar-alt":t.avatarAlt,"avatar-fit":t.avatarFit,"no-style":t.noStyle,class:e.normalizeClass({[`is-${t.role}`]:!0})},e.createSlots({_:2},[o.$slots.avatar?{name:"avatar",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"avatar",{item:t})]),key:"0"}:void 0,o.$slots.header?{name:"header",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{item:t})]),key:"1"}:void 0,o.$slots.content?{name:"content",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"content",{item:t})]),key:"2"}:void 0,o.$slots.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"footer",{item:t})]),key:"3"}:void 0,o.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"loading",{item:t})]),key:"4"}:void 0]),1032,["content","placement","loading","shape","variant","is-markdown","is-fog","typing","max-width","avatar","avatar-size","avatar-gap","avatar-shape","avatar-src-set","avatar-alt","avatar-fit","no-style","class"]))),128))]),_:3},8,["append-to","always"])),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vk-bubble-list-default-back-button",{"vk-bubble-list-back-to-bottom-solt":o.$slots.backToBottom}]),style:e.normalizeStyle({bottom:l.backButtonPosition.bottom,left:l.backButtonPosition.left}),onClick:h},[e.renderSlot(o.$slots,"backToBottom",{},()=>[e.createVNode(b,{class:"vk-bubble-list-back-to-bottom-icon",style:e.normalizeStyle({color:r.btnColor})},{default:e.withCtx(()=>[e.createVNode(e.unref(R.ArrowDownBold)),r.btnLoading?(e.openBlock(),e.createBlock(A,{key:0,class:"back-to-bottom-loading-svg-bg"})):e.createCommentVNode("",!0)]),_:1},8,["style"])])],6),[[e.vShow,S.value]])])}}}),L={items:{type:Array,default:()=>[]},elRef:{type:Function,default:z.noop},scrollbarAppendTo:null,virtual:{type:Boolean,default:!1},keyField:{type:String,default:"key"},autoScrollThreshold:{type:Number,default:200}},f=e.defineComponent({name:"VkBubbleList",inheritAttrs:!1,__name:"index",props:L,setup(l,{expose:i}){const r=l,n=e.ref();return e.watch(()=>r.elRef,a=>{a&&a(n.value)},{immediate:!0}),i({scrollToTop:()=>n.value?.scrollToTop(),scrollToBottom:()=>n.value?.scrollToBottom(),scrollToBubble:a=>n.value?.scrollToBubble(a)}),(a,v)=>(e.openBlock(),e.createBlock(e.unref(m.VkBubbleRenderTemplates),null,{placeholder:e.withCtx(()=>[e.createVNode(e.unref(m.VkBubbleTemplates))]),default:e.withCtx(()=>[e.renderSlot(a.$slots,"renderer"),e.createVNode(e.unref($.ElAutoResizer),null,{default:e.withCtx(({height:u})=>[e.createVNode(I,e.mergeProps({ref_key:"bubbleListRef",ref:n,"btn-icon-size":18,"max-height":`${u}px`,"scrollbar-append-to":a.scrollbarAppendTo,virtual:a.virtual,"key-field":a.keyField,"auto-scroll-threshold":a.autoScrollThreshold,style:{"--el-bubble-list-max-height":`${u}px`},list:a.items},a.$attrs),e.createSlots({content:e.withCtx(({item:s})=>[e.createVNode(e.unref(m.VkBubbleRenderer),{source:[s]},null,8,["source"])]),_:2},[a.$slots.avatar?{name:"avatar",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"avatar",e.normalizeProps(e.guardReactiveProps(s)))]),key:"0"}:void 0,a.$slots.header?{name:"header",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"header",e.normalizeProps(e.guardReactiveProps(s)))]),key:"1"}:void 0,a.$slots.loading?{name:"loading",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"loading",e.normalizeProps(e.guardReactiveProps(s)))]),key:"2"}:void 0,a.$slots.footer?{name:"footer",fn:e.withCtx(s=>[e.renderSlot(a.$slots,"footer",e.normalizeProps(e.guardReactiveProps(s)))]),key:"3"}:void 0]),1040,["max-height","scrollbar-append-to","virtual","key-field","auto-scroll-threshold","style","list"])]),_:3})]),_:3}))}}),M=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));f.install=l=>{l.component(f.name||"VkBubbleList",f)};Object.defineProperty(exports,"Role",{enumerable:!0,get:()=>P.Role});exports.VkBubbleList=f;exports.__VkBubbleList=M;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("@vunk/plus/components/bubble-templates"),P=require("element-plus"),B=require("@vunk/plus/vue-virtual-scroller"),F=require("@element-plus/icons-vue"),q=require("@vueuse/core"),S=require("@vunk/plus/components/scrollbar"),C=require("@vunk/plus/element/bubble"),I=require("../_plugin-vue_export-helper-BHFhmbuH.js"),N=require("@vunk/shared/function"),A=require("@vunk/plus/components/agent-chat-provider"),E={},O={xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",version:"1.1",width:"704",height:"704",viewBox:"0 0 704 704"};function M(n,f){return e.openBlock(),e.createElementBlock("svg",O,[...f[0]||(f[0]=[e.createStaticVNode('<defs><filter id="master_svg0_62_10054" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-0.030120481927710843" y="-0.030120481927710843" width="1.0602409638554218" height="1.0602409638554218"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur"></feGaussianBlur></filter><linearGradient id="master_svg1_62_10082" x1="0.5" y1="-0.13192443549633026" x2="0.42319029569625854" y2="1.368432641029358"><stop offset="9.145302325487137%" stop-color="currentColor" stop-opacity="1"></stop><stop offset="13.636428117752075%" stop-color="currentColor" stop-opacity="0.07539999485015869"></stop><stop offset="16.968481242656708%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g transform="matrix(0,1,-1,0,704,-664)" filter="url(#master_svg0_62_10054)"><path d="M1016,684C1199.359,684,1348,535.359,1348,352C1348,168.641,1199.359,20,1016,20C832.641,20,684,168.641,684,352C684,535.359,832.641,684,1016,684ZM1016,32C1192.731,32,1336,175.269,1336,352C1336,528.731,1192.731,672,1016,672C839.269,672,696,528.731,696,352C696,175.269,839.269,32,1016,32Z" fill-rule="evenodd" fill="url(#master_svg1_62_10082)" fill-opacity="1"></path></g>',2)])])}const H=I._export_sfc(E,[["render",M]]),L={class:"vk-bubble-list-wrapper"},G=e.defineComponent({__name:"index",props:{list:{type:Array,default:()=>[]},autoScroll:{type:Boolean,default:!0},autoScrollThreshold:{type:Number,default:200},maxHeight:{type:String,default:""},alwaysShowScrollbar:{type:Boolean,default:!1},backButtonThreshold:{type:Number,default:80},showBackButton:{type:Boolean,default:!0},backButtonPosition:{type:Object,default:()=>({bottom:"20px",left:"calc(50% - 19px)"})},btnLoading:{type:Boolean,default:!0},btnColor:{type:String,default:"#409EFF"},btnIconSize:{type:Number,default:24},scrollbarAppendTo:{type:null,default:void 0},virtual:{type:Boolean,default:!1},keyField:{type:String,default:"key"}},emits:{complete:null},setup(n,{expose:f}){const s=n,r=e.ref(),a=e.ref(),h=e.ref();function b(){document.documentElement.style.setProperty("--el-bubble-list-max-height",s.maxHeight||"100%"),document.documentElement.style.setProperty("--el-bubble-list-btn-size",`${s.btnIconSize}px`)}e.onMounted(()=>{b(),s.virtual&&e.nextTick(()=>{const o=r.value?.wrapRef;o&&(h.value=o)}),setTimeout(g)}),e.watch(()=>[s.maxHeight,s.btnIconSize],()=>b());const i=e.ref(),T=e.computed(()=>s.showBackButton&&i.value!==void 0&&i.value>s.backButtonThreshold);let p=!1;function g(){const o=r.value?.wrapRef;if(o)return i.value=o.scrollHeight-o.scrollTop-o.clientHeight,i.value}function y(){if(s.virtual){a.value?.scrollToBottom();return}r.value?.scrollToBottom()}function $(){if(s.virtual){a.value?.scrollToItem(0);return}r.value?.scrollToTop()}async function R(o){if(s.virtual){const l=r.value?.wrapRef;if(!l)return;p=!0;try{const d=l.querySelector(`[data-index="${o}"][data-visible="true"] .el-bubble`);if(d){const u=l.getBoundingClientRect(),c=d.getBoundingClientRect();l.scrollTo({top:c.top-u.top+l.scrollTop-24,behavior:"auto"});return}let t=0;for(;t<o;){const u=a.value?.getItemOffset(t+1)??0;l.scrollTo({top:u,behavior:"auto"}),await new Promise(c=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>c())})}),t=Math.min(t+20,o)}for(const u of[1,2]){a.value?.scrollToItem(o),await new Promise(m=>{requestAnimationFrame(()=>{requestAnimationFrame(()=>m())})});const c=l.querySelector(`[data-index="${o}"][data-visible="true"] .el-bubble`);if(c){const m=l.getBoundingClientRect(),z=c.getBoundingClientRect();l.scrollTo({top:z.top-m.top+l.scrollTop-24,behavior:"auto"})}}}finally{p=!1}return}p=!0;try{const l=r.value?.wrapRef;if(!l)return;const d=l.querySelectorAll(".el-bubble");if(o>=d.length)return;const t=d[o],u=l.getBoundingClientRect(),c=t.getBoundingClientRect();l.scrollTo({top:c.top-u.top+l.scrollTop,behavior:"smooth"})}finally{p=!1}}function V(o){return a.value?.getItemOffset(o)}function x(){const o=a.value,l=r.value?.wrapRef;if(!o||!l)return;const d=l.scrollTop,t=l.clientHeight,u=o.findItemIndex(d),c=o.findItemIndex(d+t);return{start:u,end:c}}const w=e.ref();return e.onMounted(()=>{e.nextTick(()=>{w.value=r.value?.wrapRef?.firstElementChild})}),s.autoScroll&&q.useResizeObserver(w,()=>{if(p)return;const o=g();o!==void 0&&o>s.autoScrollThreshold||y()}),f({scrollToTop:$,scrollToBottom:y,scrollToBubble:R,getItemOffset:V,getVisibleRange:x}),(o,l)=>{const d=e.resolveComponent("el-icon");return e.openBlock(),e.createElementBlock("div",L,[n.virtual?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vk-bubble-list-virtual-host",style:e.normalizeStyle({height:n.maxHeight||"100%"})},[e.createVNode(e.unref(S.VkScrollbar),{ref_key:"scrollbarRef",ref:r,class:"vk-bubble-list-virtual-scrollbar",always:n.alwaysShowScrollbar,"hide-after":800,onScroll:g},{default:e.withCtx(()=>[h.value?(e.openBlock(),e.createBlock(e.unref(B.DynamicScroller),{key:0,ref_key:"scrollerRef",ref:a,items:n.list,"min-item-size":54,"key-field":n.keyField,"page-mode":!0,"scroll-parent":h.value,class:"vk-bubble-list-dynamic-scroller"},{default:e.withCtx(({item:t,index:u,active:c})=>[e.createVNode(e.unref(B.DynamicScrollerItem),{item:t,active:c,"data-index":u,"data-visible":c,class:"vk-bubble-list-virtual-item"},{default:e.withCtx(()=>[e.createVNode(e.unref(C.Bubble),{content:t.content,placement:t.placement,loading:t.loading,shape:t.shape,variant:t.variant,"is-markdown":t.isMarkdown,"is-fog":t.isFog,typing:t.typing,"max-width":t.maxWidth,avatar:t.avatar,"avatar-size":t.avatarSize,"avatar-gap":t.avatarGap,"avatar-shape":t.avatarShape,"avatar-src-set":t.avatarSrcSet,"avatar-alt":t.avatarAlt,"avatar-fit":t.avatarFit,"no-style":t.noStyle,class:e.normalizeClass({[`is-${t.role}`]:!0})},e.createSlots({_:2},[o.$slots.avatar?{name:"avatar",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"avatar",{item:t})]),key:"0"}:void 0,o.$slots.header?{name:"header",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{item:t})]),key:"1"}:void 0,o.$slots.content?{name:"content",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"content",{item:t})]),key:"2"}:void 0,o.$slots.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"footer",{item:t})]),key:"3"}:void 0,o.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"loading",{item:t})]),key:"4"}:void 0]),1032,["content","placement","loading","shape","variant","is-markdown","is-fog","typing","max-width","avatar","avatar-size","avatar-gap","avatar-shape","avatar-src-set","avatar-alt","avatar-fit","no-style","class"])]),_:2},1032,["item","active","data-index","data-visible"])]),_:3},8,["items","key-field","scroll-parent"])):e.createCommentVNode("",!0)]),_:3},8,["always"])],4)):(e.openBlock(),e.createBlock(e.unref(S.VkScrollbar),{key:1,ref_key:"scrollbarRef",ref:r,class:"vk-bubble-list","append-to":n.scrollbarAppendTo,always:n.alwaysShowScrollbar,"hide-after":800,onScroll:g},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.list,(t,u)=>(e.openBlock(),e.createBlock(e.unref(C.Bubble),{key:t.key||u,content:t.content,placement:t.placement,loading:t.loading,shape:t.shape,variant:t.variant,"is-markdown":t.isMarkdown,"is-fog":t.isFog,typing:t.typing,"max-width":t.maxWidth,avatar:t.avatar,"avatar-size":t.avatarSize,"avatar-gap":t.avatarGap,"avatar-shape":t.avatarShape,"avatar-src-set":t.avatarSrcSet,"avatar-alt":t.avatarAlt,"avatar-fit":t.avatarFit,"no-style":t.noStyle,class:e.normalizeClass({[`is-${t.role}`]:!0})},e.createSlots({_:2},[o.$slots.avatar?{name:"avatar",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"avatar",{item:t})]),key:"0"}:void 0,o.$slots.header?{name:"header",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"header",{item:t})]),key:"1"}:void 0,o.$slots.content?{name:"content",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"content",{item:t})]),key:"2"}:void 0,o.$slots.footer?{name:"footer",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"footer",{item:t})]),key:"3"}:void 0,o.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(o.$slots,"loading",{item:t})]),key:"4"}:void 0]),1032,["content","placement","loading","shape","variant","is-markdown","is-fog","typing","max-width","avatar","avatar-size","avatar-gap","avatar-shape","avatar-src-set","avatar-alt","avatar-fit","no-style","class"]))),128))]),_:3},8,["append-to","always"])),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["vk-bubble-list-default-back-button",{"vk-bubble-list-back-to-bottom-solt":o.$slots.backToBottom}]),style:e.normalizeStyle({bottom:n.backButtonPosition.bottom,left:n.backButtonPosition.left}),onClick:y},[e.renderSlot(o.$slots,"backToBottom",{},()=>[e.createVNode(d,{class:"vk-bubble-list-back-to-bottom-icon",style:e.normalizeStyle({color:s.btnColor})},{default:e.withCtx(()=>[e.createVNode(e.unref(F.ArrowDownBold)),s.btnLoading?(e.openBlock(),e.createBlock(H,{key:0,class:"back-to-bottom-loading-svg-bg"})):e.createCommentVNode("",!0)]),_:1},8,["style"])])],6),[[e.vShow,T.value]])])}}}),_={items:{type:Array,default:()=>[]},elRef:{type:Function,default:N.noop},scrollbarAppendTo:null,virtual:{type:Boolean,default:!1},keyField:{type:String,default:"key"},autoScrollThreshold:{type:Number,default:200}},v=e.defineComponent({name:"VkBubbleList",inheritAttrs:!1,__name:"index",props:_,setup(n,{expose:f}){const s=n,r=e.ref();return e.watch(()=>s.elRef,a=>{a&&a(r.value)},{immediate:!0}),f({scrollToTop:()=>r.value?.scrollToTop(),scrollToBottom:()=>r.value?.scrollToBottom(),scrollToBubble:a=>r.value?.scrollToBubble(a),getItemOffset:a=>r.value?.getItemOffset(a),getVisibleRange:()=>r.value?.getVisibleRange()}),(a,h)=>(e.openBlock(),e.createBlock(e.unref(k.VkBubbleRenderTemplates),null,{placeholder:e.withCtx(()=>[e.createVNode(e.unref(k.VkBubbleTemplates))]),default:e.withCtx(()=>[e.renderSlot(a.$slots,"renderer"),e.createVNode(e.unref(P.ElAutoResizer),null,{default:e.withCtx(({height:b})=>[e.createVNode(G,e.mergeProps({ref_key:"bubbleListRef",ref:r,"btn-icon-size":18,"max-height":`${b}px`,"scrollbar-append-to":a.scrollbarAppendTo,virtual:a.virtual,"key-field":a.keyField,"auto-scroll-threshold":a.autoScrollThreshold,style:{"--el-bubble-list-max-height":`${b}px`},list:a.items},a.$attrs),e.createSlots({content:e.withCtx(({item:i})=>[e.createVNode(e.unref(k.VkBubbleRenderer),{source:[i]},null,8,["source"])]),_:2},[a.$slots.avatar?{name:"avatar",fn:e.withCtx(i=>[e.renderSlot(a.$slots,"avatar",e.normalizeProps(e.guardReactiveProps(i)))]),key:"0"}:void 0,a.$slots.header?{name:"header",fn:e.withCtx(i=>[e.renderSlot(a.$slots,"header",e.normalizeProps(e.guardReactiveProps(i)))]),key:"1"}:void 0,a.$slots.loading?{name:"loading",fn:e.withCtx(i=>[e.renderSlot(a.$slots,"loading",e.normalizeProps(e.guardReactiveProps(i)))]),key:"2"}:void 0,a.$slots.footer?{name:"footer",fn:e.withCtx(i=>[e.renderSlot(a.$slots,"footer",e.normalizeProps(e.guardReactiveProps(i)))]),key:"3"}:void 0]),1040,["max-height","scrollbar-append-to","virtual","key-field","auto-scroll-threshold","style","list"])]),_:3})]),_:3}))}}),j=Object.freeze(Object.defineProperty({__proto__:null},Symbol.toStringTag,{value:"Module"}));v.install=n=>{n.component(v.name||"VkBubbleList",v)};Object.defineProperty(exports,"Role",{enumerable:!0,get:()=>A.Role});exports.VkBubbleList=v;exports.__VkBubbleList=j;exports.default=v;

package/components/bubble-list/index.mjs

@@ -1,15 +1,15 @@
-import { openBlock as c, createElementBlock as S, createStaticVNode as x, defineComponent as G, ref as p, onMounted as V, nextTick as P, watch as N, computed as j, resolveComponent as O, normalizeStyle as R, createVNode as d, unref as u, withCtx as o, createBlock as y, normalizeClass as C, createSlots as F, renderSlot as s, createCommentVNode as I, Fragment as q, renderList as W, withDirectives as Z, createElementVNode as _, vShow as U, mergeProps as J, normalizeProps as B, guardReactiveProps as w } from "vue";
-import { VkBubbleRenderTemplates as K, VkBubbleRenderer as Q, VkBubbleTemplates as X } from "@vunk/plus/components/bubble-templates";
-import { ElAutoResizer as Y } from "element-plus";
-import { DynamicScroller as ee, DynamicScrollerItem as te } from "@vunk/plus/vue-virtual-scroller";
-import { ArrowDownBold as ae } from "@element-plus/icons-vue";
-import { useResizeObserver as oe } from "@vueuse/core";
-import { VkScrollbar as L } from "@vunk/plus/components/scrollbar";
-import { Bubble as E } from "@vunk/plus/element/bubble";
-import { _ as le } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
-import { noop as re } from "@vunk/shared/function";
-import { Role as Re } from "@vunk/plus/components/agent-chat-provider";
-const se = {}, ne = {
+import { openBlock as v, createElementBlock as $, createStaticVNode as W, defineComponent as H, ref as y, onMounted as P, nextTick as E, watch as N, computed as Z, resolveComponent as U, normalizeStyle as F, createVNode as b, unref as f, withCtx as o, createBlock as k, normalizeClass as z, createSlots as V, renderSlot as i, createCommentVNode as L, Fragment as J, renderList as K, withDirectives as Q, createElementVNode as X, vShow as Y, mergeProps as ee, normalizeProps as S, guardReactiveProps as T } from "vue";
+import { VkBubbleRenderTemplates as te, VkBubbleRenderer as ae, VkBubbleTemplates as oe } from "@vunk/plus/components/bubble-templates";
+import { ElAutoResizer as le } from "element-plus";
+import { DynamicScroller as re, DynamicScrollerItem as se } from "@vunk/plus/vue-virtual-scroller";
+import { ArrowDownBold as ne } from "@element-plus/icons-vue";
+import { useResizeObserver as ie } from "@vueuse/core";
+import { VkScrollbar as O } from "@vunk/plus/components/scrollbar";
+import { Bubble as G } from "@vunk/plus/element/bubble";
+import { _ as ue } from "../_plugin-vue_export-helper-CHgC5LLL.mjs";
+import { noop as ce } from "@vunk/shared/function";
+import { Role as Ve } from "@vunk/plus/components/agent-chat-provider";
+const de = {}, fe = {
   xmlns: "http://www.w3.org/2000/svg",
   "xmlns:xlink": "http://www.w3.org/1999/xlink",
   version: "1.1",
@@ -17,12 +17,12 @@ const se = {}, ne = {
   height: "704",
   viewBox: "0 0 704 704"
 };
-function ie(l, f) {
-  return c(), S("svg", ne, [...f[0] || (f[0] = [
-    x('<defs><filter id="master_svg0_62_10054" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-0.030120481927710843" y="-0.030120481927710843" width="1.0602409638554218" height="1.0602409638554218"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur"></feGaussianBlur></filter><linearGradient id="master_svg1_62_10082" x1="0.5" y1="-0.13192443549633026" x2="0.42319029569625854" y2="1.368432641029358"><stop offset="9.145302325487137%" stop-color="currentColor" stop-opacity="1"></stop><stop offset="13.636428117752075%" stop-color="currentColor" stop-opacity="0.07539999485015869"></stop><stop offset="16.968481242656708%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g transform="matrix(0,1,-1,0,704,-664)" filter="url(#master_svg0_62_10054)"><path d="M1016,684C1199.359,684,1348,535.359,1348,352C1348,168.641,1199.359,20,1016,20C832.641,20,684,168.641,684,352C684,535.359,832.641,684,1016,684ZM1016,32C1192.731,32,1336,175.269,1336,352C1336,528.731,1192.731,672,1016,672C839.269,672,696,528.731,696,352C696,175.269,839.269,32,1016,32Z" fill-rule="evenodd" fill="url(#master_svg1_62_10082)" fill-opacity="1"></path></g>', 2)
+function pe(s, m) {
+  return v(), $("svg", fe, [...m[0] || (m[0] = [
+    W('<defs><filter id="master_svg0_62_10054" filterUnits="objectBoundingBox" color-interpolation-filters="sRGB" x="-0.030120481927710843" y="-0.030120481927710843" width="1.0602409638554218" height="1.0602409638554218"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur"></feGaussianBlur></filter><linearGradient id="master_svg1_62_10082" x1="0.5" y1="-0.13192443549633026" x2="0.42319029569625854" y2="1.368432641029358"><stop offset="9.145302325487137%" stop-color="currentColor" stop-opacity="1"></stop><stop offset="13.636428117752075%" stop-color="currentColor" stop-opacity="0.07539999485015869"></stop><stop offset="16.968481242656708%" stop-color="currentColor" stop-opacity="0"></stop></linearGradient></defs><g transform="matrix(0,1,-1,0,704,-664)" filter="url(#master_svg0_62_10054)"><path d="M1016,684C1199.359,684,1348,535.359,1348,352C1348,168.641,1199.359,20,1016,20C832.641,20,684,168.641,684,352C684,535.359,832.641,684,1016,684ZM1016,32C1192.731,32,1336,175.269,1336,352C1336,528.731,1192.731,672,1016,672C839.269,672,696,528.731,696,352C696,175.269,839.269,32,1016,32Z" fill-rule="evenodd" fill="url(#master_svg1_62_10082)" fill-opacity="1"></path></g>', 2)
   ])]);
 }
-const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-list-wrapper" }, de = /* @__PURE__ */ G({
+const ve = /* @__PURE__ */ ue(de, [["render", pe]]), be = { class: "vk-bubble-list-wrapper" }, me = /* @__PURE__ */ H({
   __name: "index",
   props: {
     list: {
@@ -90,114 +90,172 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
   emits: {
     complete: null
   },
-  setup(l, { expose: f }) {
-    const r = l, n = p(), a = p(), h = p();
-    function b() {
+  setup(s, { expose: m }) {
+    const n = s, r = y(), a = y(), w = y();
+    function g() {
       document.documentElement.style.setProperty(
         "--el-bubble-list-max-height",
-        r.maxHeight || "100%"
+        n.maxHeight || "100%"
       ), document.documentElement.style.setProperty(
         "--el-bubble-list-btn-size",
-        `${r.btnIconSize}px`
+        `${n.btnIconSize}px`
       );
     }
-    V(() => {
-      b(), r.virtual && P(() => {
-        const t = n.value?.wrapRef;
-        t && (h.value = t);
-      }), setTimeout(g);
+    P(() => {
+      g(), n.virtual && E(() => {
+        const t = r.value?.wrapRef;
+        t && (w.value = t);
+      }), setTimeout(B);
     }), N(
-      () => [r.maxHeight, r.btnIconSize],
-      () => b()
+      () => [n.maxHeight, n.btnIconSize],
+      () => g()
     );
-    const i = p(), D = j(() => r.showBackButton && i.value !== void 0 && i.value > r.backButtonThreshold);
-    function g() {
-      const t = n.value?.wrapRef;
+    const u = y(), q = Z(() => n.showBackButton && u.value !== void 0 && u.value > n.backButtonThreshold);
+    let h = !1;
+    function B() {
+      const t = r.value?.wrapRef;
       if (t)
-        return i.value = t.scrollHeight - t.scrollTop - t.clientHeight, i.value;
+        return u.value = t.scrollHeight - t.scrollTop - t.clientHeight, u.value;
     }
-    function T() {
-      if (r.virtual) {
+    function R() {
+      if (n.virtual) {
         a.value?.scrollToBottom();
         return;
       }
-      n.value?.scrollToBottom();
+      r.value?.scrollToBottom();
     }
-    function H() {
-      if (r.virtual) {
+    function M() {
+      if (n.virtual) {
         a.value?.scrollToItem(0);
         return;
       }
-      n.value?.scrollToTop();
+      r.value?.scrollToTop();
     }
-    function M(t) {
-      if (r.virtual) {
-        a.value?.scrollToItem(t), requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            a.value?.scrollToItem(t);
-          });
-        });
+    async function x(t) {
+      if (n.virtual) {
+        const l = r.value?.wrapRef;
+        if (!l) return;
+        h = !0;
+        try {
+          const p = l.querySelector(
+            `[data-index="${t}"][data-visible="true"] .el-bubble`
+          );
+          if (p) {
+            const d = l.getBoundingClientRect(), c = p.getBoundingClientRect();
+            l.scrollTo({
+              top: c.top - d.top + l.scrollTop - 24,
+              behavior: "auto"
+            });
+            return;
+          }
+          let e = 0;
+          for (; e < t; ) {
+            const d = a.value?.getItemOffset(e + 1) ?? 0;
+            l.scrollTo({ top: d, behavior: "auto" }), await new Promise((c) => {
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => c());
+              });
+            }), e = Math.min(e + 20, t);
+          }
+          for (const d of [1, 2]) {
+            a.value?.scrollToItem(t), await new Promise((C) => {
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => C());
+              });
+            });
+            const c = l.querySelector(
+              `[data-index="${t}"][data-visible="true"] .el-bubble`
+            );
+            if (c) {
+              const C = l.getBoundingClientRect(), _ = c.getBoundingClientRect();
+              l.scrollTo({
+                top: _.top - C.top + l.scrollTop - 24,
+                behavior: "auto"
+              });
+            }
+          }
+        } finally {
+          h = !1;
+        }
         return;
       }
-      const v = n.value?.wrapRef;
-      if (!v) return;
-      const k = v.querySelectorAll(".el-bubble");
-      if (t >= k.length) return;
-      const e = k[t], m = v.getBoundingClientRect(), $ = e.getBoundingClientRect();
-      v.scrollTo({
-        top: $.top - m.top + v.scrollTop,
-        behavior: "smooth"
-      });
+      h = !0;
+      try {
+        const l = r.value?.wrapRef;
+        if (!l) return;
+        const p = l.querySelectorAll(".el-bubble");
+        if (t >= p.length) return;
+        const e = p[t], d = l.getBoundingClientRect(), c = e.getBoundingClientRect();
+        l.scrollTo({
+          top: c.top - d.top + l.scrollTop,
+          behavior: "smooth"
+        });
+      } finally {
+        h = !1;
+      }
+    }
+    function D(t) {
+      return a.value?.getItemOffset(t);
+    }
+    function j() {
+      const t = a.value, l = r.value?.wrapRef;
+      if (!t || !l) return;
+      const p = l.scrollTop, e = l.clientHeight, d = t.findItemIndex(p), c = t.findItemIndex(p + e);
+      return { start: d, end: c };
     }
-    const A = p();
-    return V(() => {
-      P(() => {
-        A.value = n.value?.wrapRef?.firstElementChild;
+    const A = y();
+    return P(() => {
+      E(() => {
+        A.value = r.value?.wrapRef?.firstElementChild;
       });
-    }), r.autoScroll && oe(A, () => {
-      const t = g();
-      t !== void 0 && t > r.autoScrollThreshold || T();
-    }), f({
-      scrollToTop: H,
-      scrollToBottom: T,
-      scrollToBubble: M
-    }), (t, v) => {
-      const k = O("el-icon");
-      return c(), S("div", ce, [
-        l.virtual ? (c(), S("div", {
+    }), n.autoScroll && ie(A, () => {
+      if (h) return;
+      const t = B();
+      t !== void 0 && t > n.autoScrollThreshold || R();
+    }), m({
+      scrollToTop: M,
+      scrollToBottom: R,
+      scrollToBubble: x,
+      getItemOffset: D,
+      getVisibleRange: j
+    }), (t, l) => {
+      const p = U("el-icon");
+      return v(), $("div", be, [
+        s.virtual ? (v(), $("div", {
           key: 0,
           class: "vk-bubble-list-virtual-host",
-          style: R({ height: l.maxHeight || "100%" })
+          style: F({ height: s.maxHeight || "100%" })
         }, [
-          d(u(L), {
+          b(f(O), {
             ref_key: "scrollbarRef",
-            ref: n,
+            ref: r,
             class: "vk-bubble-list-virtual-scrollbar",
-            always: l.alwaysShowScrollbar,
+            always: s.alwaysShowScrollbar,
             "hide-after": 800,
-            onScroll: g
+            onScroll: B
           }, {
             default: o(() => [
-              h.value ? (c(), y(u(ee), {
+              w.value ? (v(), k(f(re), {
                 key: 0,
                 ref_key: "scrollerRef",
                 ref: a,
-                items: l.list,
+                items: s.list,
                 "min-item-size": 54,
-                "key-field": l.keyField,
+                "key-field": s.keyField,
                 "page-mode": !0,
-                "scroll-parent": h.value,
+                "scroll-parent": w.value,
                 class: "vk-bubble-list-dynamic-scroller"
               }, {
-                default: o(({ item: e, index: m, active: $ }) => [
-                  d(u(te), {
+                default: o(({ item: e, index: d, active: c }) => [
+                  b(f(se), {
                     item: e,
-                    active: $,
-                    "data-index": m,
+                    active: c,
+                    "data-index": d,
+                    "data-visible": c,
                     class: "vk-bubble-list-virtual-item"
                   }, {
                     default: o(() => [
-                      d(u(E), {
+                      b(f(G), {
                         content: e.content,
                         placement: e.placement,
                         loading: e.loading,
@@ -215,68 +273,68 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
                         "avatar-alt": e.avatarAlt,
                         "avatar-fit": e.avatarFit,
                         "no-style": e.noStyle,
-                        class: C({
+                        class: z({
                           [`is-${e.role}`]: !0
                         })
-                      }, F({ _: 2 }, [
+                      }, V({ _: 2 }, [
                         t.$slots.avatar ? {
                           name: "avatar",
                           fn: o(() => [
-                            s(t.$slots, "avatar", { item: e })
+                            i(t.$slots, "avatar", { item: e })
                           ]),
                           key: "0"
                         } : void 0,
                         t.$slots.header ? {
                           name: "header",
                           fn: o(() => [
-                            s(t.$slots, "header", { item: e })
+                            i(t.$slots, "header", { item: e })
                           ]),
                           key: "1"
                         } : void 0,
                         t.$slots.content ? {
                           name: "content",
                           fn: o(() => [
-                            s(t.$slots, "content", { item: e })
+                            i(t.$slots, "content", { item: e })
                           ]),
                           key: "2"
                         } : void 0,
                         t.$slots.footer ? {
                           name: "footer",
                           fn: o(() => [
-                            s(t.$slots, "footer", { item: e })
+                            i(t.$slots, "footer", { item: e })
                           ]),
                           key: "3"
                         } : void 0,
                         t.$slots.loading ? {
                           name: "loading",
                           fn: o(() => [
-                            s(t.$slots, "loading", { item: e })
+                            i(t.$slots, "loading", { item: e })
                           ]),
                           key: "4"
                         } : void 0
                       ]), 1032, ["content", "placement", "loading", "shape", "variant", "is-markdown", "is-fog", "typing", "max-width", "avatar", "avatar-size", "avatar-gap", "avatar-shape", "avatar-src-set", "avatar-alt", "avatar-fit", "no-style", "class"])
                     ]),
                     _: 2
-                  }, 1032, ["item", "active", "data-index"])
+                  }, 1032, ["item", "active", "data-index", "data-visible"])
                 ]),
                 _: 3
-              }, 8, ["items", "key-field", "scroll-parent"])) : I("", !0)
+              }, 8, ["items", "key-field", "scroll-parent"])) : L("", !0)
             ]),
             _: 3
           }, 8, ["always"])
-        ], 4)) : (c(), y(u(L), {
+        ], 4)) : (v(), k(f(O), {
           key: 1,
           ref_key: "scrollbarRef",
-          ref: n,
+          ref: r,
           class: "vk-bubble-list",
-          "append-to": l.scrollbarAppendTo,
-          always: l.alwaysShowScrollbar,
+          "append-to": s.scrollbarAppendTo,
+          always: s.alwaysShowScrollbar,
           "hide-after": 800,
-          onScroll: g
+          onScroll: B
         }, {
           default: o(() => [
-            (c(!0), S(q, null, W(l.list, (e, m) => (c(), y(u(E), {
-              key: e.key || m,
+            (v(!0), $(J, null, K(s.list, (e, d) => (v(), k(f(G), {
+              key: e.key || d,
               content: e.content,
               placement: e.placement,
               loading: e.loading,
@@ -294,42 +352,42 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
               "avatar-alt": e.avatarAlt,
               "avatar-fit": e.avatarFit,
               "no-style": e.noStyle,
-              class: C({
+              class: z({
                 [`is-${e.role}`]: !0
               })
-            }, F({ _: 2 }, [
+            }, V({ _: 2 }, [
               t.$slots.avatar ? {
                 name: "avatar",
                 fn: o(() => [
-                  s(t.$slots, "avatar", { item: e })
+                  i(t.$slots, "avatar", { item: e })
                 ]),
                 key: "0"
               } : void 0,
               t.$slots.header ? {
                 name: "header",
                 fn: o(() => [
-                  s(t.$slots, "header", { item: e })
+                  i(t.$slots, "header", { item: e })
                 ]),
                 key: "1"
               } : void 0,
               t.$slots.content ? {
                 name: "content",
                 fn: o(() => [
-                  s(t.$slots, "content", { item: e })
+                  i(t.$slots, "content", { item: e })
                 ]),
                 key: "2"
               } : void 0,
               t.$slots.footer ? {
                 name: "footer",
                 fn: o(() => [
-                  s(t.$slots, "footer", { item: e })
+                  i(t.$slots, "footer", { item: e })
                 ]),
                 key: "3"
               } : void 0,
               t.$slots.loading ? {
                 name: "loading",
                 fn: o(() => [
-                  s(t.$slots, "loading", { item: e })
+                  i(t.$slots, "loading", { item: e })
                 ]),
                 key: "4"
               } : void 0
@@ -337,45 +395,45 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
           ]),
           _: 3
         }, 8, ["append-to", "always"])),
-        Z(_("div", {
-          class: C(["vk-bubble-list-default-back-button", {
+        Q(X("div", {
+          class: z(["vk-bubble-list-default-back-button", {
             "vk-bubble-list-back-to-bottom-solt": t.$slots.backToBottom
           }]),
-          style: R({
-            bottom: l.backButtonPosition.bottom,
-            left: l.backButtonPosition.left
+          style: F({
+            bottom: s.backButtonPosition.bottom,
+            left: s.backButtonPosition.left
           }),
-          onClick: T
+          onClick: R
         }, [
-          s(t.$slots, "backToBottom", {}, () => [
-            d(k, {
+          i(t.$slots, "backToBottom", {}, () => [
+            b(p, {
               class: "vk-bubble-list-back-to-bottom-icon",
-              style: R({ color: r.btnColor })
+              style: F({ color: n.btnColor })
             }, {
               default: o(() => [
-                d(u(ae)),
-                r.btnLoading ? (c(), y(ue, {
+                b(f(ne)),
+                n.btnLoading ? (v(), k(ve, {
                   key: 0,
                   class: "back-to-bottom-loading-svg-bg"
-                })) : I("", !0)
+                })) : L("", !0)
               ]),
               _: 1
             }, 8, ["style"])
           ])
         ], 6), [
-          [U, D.value]
+          [Y, q.value]
         ])
       ]);
     };
   }
-}), fe = {
+}), ye = {
   items: {
     type: Array,
     default: () => []
   },
   elRef: {
     type: Function,
-    default: re
+    default: ce
   },
   scrollbarAppendTo: null,
   virtual: {
@@ -394,73 +452,75 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
     type: Number,
     default: 200
   }
-}, z = /* @__PURE__ */ G({
+}, I = /* @__PURE__ */ H({
   name: "VkBubbleList",
   inheritAttrs: !1,
   __name: "index",
-  props: fe,
-  setup(l, { expose: f }) {
-    const r = l, n = p();
-    return N(() => r.elRef, (a) => {
-      a && a(n.value);
-    }, { immediate: !0 }), f({
-      scrollToTop: () => n.value?.scrollToTop(),
-      scrollToBottom: () => n.value?.scrollToBottom(),
-      scrollToBubble: (a) => n.value?.scrollToBubble(a)
-    }), (a, h) => (c(), y(u(K), null, {
+  props: ye,
+  setup(s, { expose: m }) {
+    const n = s, r = y();
+    return N(() => n.elRef, (a) => {
+      a && a(r.value);
+    }, { immediate: !0 }), m({
+      scrollToTop: () => r.value?.scrollToTop(),
+      scrollToBottom: () => r.value?.scrollToBottom(),
+      scrollToBubble: (a) => r.value?.scrollToBubble(a),
+      getItemOffset: (a) => r.value?.getItemOffset(a),
+      getVisibleRange: () => r.value?.getVisibleRange()
+    }), (a, w) => (v(), k(f(te), null, {
       placeholder: o(() => [
-        d(u(X))
+        b(f(oe))
       ]),
       default: o(() => [
-        s(a.$slots, "renderer"),
-        d(u(Y), null, {
-          default: o(({ height: b }) => [
-            d(de, J({
+        i(a.$slots, "renderer"),
+        b(f(le), null, {
+          default: o(({ height: g }) => [
+            b(me, ee({
               ref_key: "bubbleListRef",
-              ref: n,
+              ref: r,
               "btn-icon-size": 18,
-              "max-height": `${b}px`,
+              "max-height": `${g}px`,
               "scrollbar-append-to": a.scrollbarAppendTo,
               virtual: a.virtual,
               "key-field": a.keyField,
               "auto-scroll-threshold": a.autoScrollThreshold,
               style: {
-                "--el-bubble-list-max-height": `${b}px`
+                "--el-bubble-list-max-height": `${g}px`
               },
               list: a.items
-            }, a.$attrs), F({
-              content: o(({ item: i }) => [
-                d(u(Q), {
-                  source: [i]
+            }, a.$attrs), V({
+              content: o(({ item: u }) => [
+                b(f(ae), {
+                  source: [u]
                 }, null, 8, ["source"])
               ]),
               _: 2
             }, [
               a.$slots.avatar ? {
                 name: "avatar",
-                fn: o((i) => [
-                  s(a.$slots, "avatar", B(w(i)))
+                fn: o((u) => [
+                  i(a.$slots, "avatar", S(T(u)))
                 ]),
                 key: "0"
               } : void 0,
               a.$slots.header ? {
                 name: "header",
-                fn: o((i) => [
-                  s(a.$slots, "header", B(w(i)))
+                fn: o((u) => [
+                  i(a.$slots, "header", S(T(u)))
                 ]),
                 key: "1"
               } : void 0,
               a.$slots.loading ? {
                 name: "loading",
-                fn: o((i) => [
-                  s(a.$slots, "loading", B(w(i)))
+                fn: o((u) => [
+                  i(a.$slots, "loading", S(T(u)))
                 ]),
                 key: "2"
               } : void 0,
               a.$slots.footer ? {
                 name: "footer",
-                fn: o((i) => [
-                  s(a.$slots, "footer", B(w(i)))
+                fn: o((u) => [
+                  i(a.$slots, "footer", S(T(u)))
                 ]),
                 key: "3"
               } : void 0
@@ -472,15 +532,15 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
       _: 3
     }));
   }
-}), Se = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+}), Fe = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null
 }, Symbol.toStringTag, { value: "Module" }));
-z.install = (l) => {
-  l.component(z.name || "VkBubbleList", z);
+I.install = (s) => {
+  s.component(I.name || "VkBubbleList", I);
 };
 export {
-  Re as Role,
-  z as VkBubbleList,
-  Se as __VkBubbleList,
-  z as default
+  Ve as Role,
+  I as VkBubbleList,
+  Fe as __VkBubbleList,
+  I as default
 };

package/components/bubble-list/src/core/index.vue.d.ts

@@ -2,7 +2,17 @@ import type { __VkAgentChatProvider } from '@vunk/plus/components/agent-chat-pro
 import type { PropType, TeleportProps } from 'vue';
 declare function scrollToBottom(): void;
 declare function scrollToTop(): void;
-declare function scrollToBubble(index: number): void;
+declare function scrollToBubble(index: number): Promise<void>;
+/** 获取指定 index 在内容空间中的偏移量（像素），未测量过的 item 返回估算值 */
+declare function getItemOffset(index: number): number | undefined;
+/**
+ * 获取当前可见范围（index 区间），用于大纲导航高亮当前项。
+ * 基于 findItemIndex + getItemOffset 估算，非实时精确值。
+ */
+declare function getVisibleRange(): {
+    start: number;
+    end: number;
+} | undefined;
 declare var __VLS_33: {
     item: __VkAgentChatProvider.BubbleItem;
 }, __VLS_36: {
@@ -119,6 +129,8 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     scrollToTop: typeof scrollToTop;
     scrollToBottom: typeof scrollToBottom;
     scrollToBubble: typeof scrollToBubble;
+    getItemOffset: typeof getItemOffset;
+    getVisibleRange: typeof getVisibleRange;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     complete: ((...args: unknown[]) => void) & ((...args: any[]) => void);
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/components/bubble-list/src/index.vue.d.ts

@@ -58,7 +58,12 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
 }>, {
     scrollToTop: () => void;
     scrollToBottom: () => void;
-    scrollToBubble: (index: number) => void;
+    scrollToBubble: (index: number) => Promise<void>;
+    getItemOffset: (index: number) => number;
+    getVisibleRange: () => {
+        start: number;
+        end: number;
+    };
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     items: {
         type: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vunk/plus",
-  "version": "1.16.1",
+  "version": "1.16.2",
   "description": "",
   "author": "",
   "license": "ISC",