@vunk/plus 1.16.0 → 1.16.2

package/components/bubble-list/index.mjs

@@ -1,15 +1,15 @@
-import { openBlock as c, createElementBlock as S, createStaticVNode as M, defineComponent as I, ref as p, onMounted as F, nextTick as P, watch as N, computed as _, resolveComponent as j, normalizeStyle as R, createVNode as d, unref as u, withCtx as o, createBlock as h, normalizeClass as C, createSlots as V, renderSlot as r, createCommentVNode as L, Fragment as O, renderList as W, withDirectives as Z, createElementVNode as q, 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 E } from "@vunk/plus/components/scrollbar";
+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 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 { _ 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(s, f) {
-  return c(), S("svg", ne, [...f[0] || (f[0] = [
-    M('<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__ */ I({
+const ve = /* @__PURE__ */ ue(de, [["render", pe]]), be = { class: "vk-bubble-list-wrapper" }, me = /* @__PURE__ */ H({
   __name: "index",
   props: {
     list: {
@@ -77,115 +77,185 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
     virtual: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Key field name for virtual list items.
+     * DynamicScroller uses this to uniquely identify each item.
+     */
+    keyField: {
+      type: String,
+      default: "key"
     }
   },
   emits: {
     complete: null
   },
-  setup(s, { expose: f }) {
-    const l = s, n = p(), a = p(), y = 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",
-        l.maxHeight || "100%"
+        n.maxHeight || "100%"
       ), document.documentElement.style.setProperty(
         "--el-bubble-list-btn-size",
-        `${l.btnIconSize}px`
+        `${n.btnIconSize}px`
       );
     }
-    F(() => {
-      b(), l.virtual && P(() => {
-        const t = n.value?.wrapRef;
-        t && (y.value = t);
-      }), setTimeout(g);
+    P(() => {
+      g(), n.virtual && E(() => {
+        const t = r.value?.wrapRef;
+        t && (w.value = t);
+      }), setTimeout(B);
     }), N(
-      () => [l.maxHeight, l.btnIconSize],
-      () => b()
+      () => [n.maxHeight, n.btnIconSize],
+      () => g()
     );
-    const i = p(), x = _(() => l.showBackButton && i.value !== void 0 && i.value > l.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 (l.virtual) {
+    function R() {
+      if (n.virtual) {
         a.value?.scrollToBottom();
         return;
       }
-      n.value?.scrollToBottom();
+      r.value?.scrollToBottom();
     }
-    function D() {
-      if (l.virtual) {
+    function M() {
+      if (n.virtual) {
         a.value?.scrollToItem(0);
         return;
       }
-      n.value?.scrollToTop();
+      r.value?.scrollToTop();
     }
-    function H(t) {
-      if (l.virtual) {
-        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);
     }
-    const A = p();
-    return F(() => {
-      P(() => {
-        A.value = n.value?.wrapRef?.firstElementChild;
+    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 = y();
+    return P(() => {
+      E(() => {
+        A.value = r.value?.wrapRef?.firstElementChild;
       });
-    }), l.autoScroll && oe(A, () => {
-      const t = g();
-      t !== void 0 && t > l.autoScrollThreshold || T();
-    }), f({
-      scrollToTop: D,
-      scrollToBottom: T,
-      scrollToBubble: H
-    }), (t, v) => {
-      const k = j("el-icon");
-      return c(), S("div", ce, [
-        s.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: s.maxHeight || "100%" })
+          style: F({ height: s.maxHeight || "100%" })
         }, [
-          d(u(E), {
+          b(f(O), {
             ref_key: "scrollbarRef",
-            ref: n,
+            ref: r,
             class: "vk-bubble-list-virtual-scrollbar",
             always: s.alwaysShowScrollbar,
             "hide-after": 800,
-            onScroll: g
+            onScroll: B
           }, {
             default: o(() => [
-              y.value ? (c(), h(u(ee), {
+              w.value ? (v(), k(f(re), {
                 key: 0,
                 ref_key: "scrollerRef",
                 ref: a,
                 items: s.list,
                 "min-item-size": 54,
-                "key-field": "key",
+                "key-field": s.keyField,
                 "page-mode": !0,
-                "scroll-parent": y.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(G), {
+                      b(f(G), {
                         content: e.content,
                         placement: e.placement,
                         loading: e.loading,
@@ -203,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
                         })
                       }, V({ _: 2 }, [
                         t.$slots.avatar ? {
                           name: "avatar",
                           fn: o(() => [
-                            r(t.$slots, "avatar", { item: e })
+                            i(t.$slots, "avatar", { item: e })
                           ]),
                           key: "0"
                         } : void 0,
                         t.$slots.header ? {
                           name: "header",
                           fn: o(() => [
-                            r(t.$slots, "header", { item: e })
+                            i(t.$slots, "header", { item: e })
                           ]),
                           key: "1"
                         } : void 0,
                         t.$slots.content ? {
                           name: "content",
                           fn: o(() => [
-                            r(t.$slots, "content", { item: e })
+                            i(t.$slots, "content", { item: e })
                           ]),
                           key: "2"
                         } : void 0,
                         t.$slots.footer ? {
                           name: "footer",
                           fn: o(() => [
-                            r(t.$slots, "footer", { item: e })
+                            i(t.$slots, "footer", { item: e })
                           ]),
                           key: "3"
                         } : void 0,
                         t.$slots.loading ? {
                           name: "loading",
                           fn: o(() => [
-                            r(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", "scroll-parent"])) : L("", !0)
+              }, 8, ["items", "key-field", "scroll-parent"])) : L("", !0)
             ]),
             _: 3
           }, 8, ["always"])
-        ], 4)) : (c(), h(u(E), {
+        ], 4)) : (v(), k(f(O), {
           key: 1,
           ref_key: "scrollbarRef",
-          ref: n,
+          ref: r,
           class: "vk-bubble-list",
           "append-to": s.scrollbarAppendTo,
           always: s.alwaysShowScrollbar,
           "hide-after": 800,
-          onScroll: g
+          onScroll: B
         }, {
           default: o(() => [
-            (c(!0), S(O, null, W(s.list, (e, m) => (c(), h(u(G), {
-              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,
@@ -282,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
               })
             }, V({ _: 2 }, [
               t.$slots.avatar ? {
                 name: "avatar",
                 fn: o(() => [
-                  r(t.$slots, "avatar", { item: e })
+                  i(t.$slots, "avatar", { item: e })
                 ]),
                 key: "0"
               } : void 0,
               t.$slots.header ? {
                 name: "header",
                 fn: o(() => [
-                  r(t.$slots, "header", { item: e })
+                  i(t.$slots, "header", { item: e })
                 ]),
                 key: "1"
               } : void 0,
               t.$slots.content ? {
                 name: "content",
                 fn: o(() => [
-                  r(t.$slots, "content", { item: e })
+                  i(t.$slots, "content", { item: e })
                 ]),
                 key: "2"
               } : void 0,
               t.$slots.footer ? {
                 name: "footer",
                 fn: o(() => [
-                  r(t.$slots, "footer", { item: e })
+                  i(t.$slots, "footer", { item: e })
                 ]),
                 key: "3"
               } : void 0,
               t.$slots.loading ? {
                 name: "loading",
                 fn: o(() => [
-                  r(t.$slots, "loading", { item: e })
+                  i(t.$slots, "loading", { item: e })
                 ]),
                 key: "4"
               } : void 0
@@ -325,24 +395,24 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
           ]),
           _: 3
         }, 8, ["append-to", "always"])),
-        Z(q("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({
+          style: F({
             bottom: s.backButtonPosition.bottom,
             left: s.backButtonPosition.left
           }),
-          onClick: T
+          onClick: R
         }, [
-          r(t.$slots, "backToBottom", {}, () => [
-            d(k, {
+          i(t.$slots, "backToBottom", {}, () => [
+            b(p, {
               class: "vk-bubble-list-back-to-bottom-icon",
-              style: R({ color: l.btnColor })
+              style: F({ color: n.btnColor })
             }, {
               default: o(() => [
-                d(u(ae)),
-                l.btnLoading ? (c(), h(ue, {
+                b(f(ne)),
+                n.btnLoading ? (v(), k(ve, {
                   key: 0,
                   class: "back-to-bottom-loading-svg-bg"
                 })) : L("", !0)
@@ -351,99 +421,110 @@ const ue = /* @__PURE__ */ le(se, [["render", ie]]), ce = { class: "vk-bubble-li
             }, 8, ["style"])
           ])
         ], 6), [
-          [U, x.value]
+          [Y, q.value]
         ])
       ]);
     };
   }
-}), fe = {
+}), ye = {
   items: {
     type: Array,
     default: () => []
   },
   elRef: {
     type: Function,
-    default: re
+    default: ce
   },
   scrollbarAppendTo: null,
   virtual: {
     type: Boolean,
     default: !1
   },
+  /**
+   * Key field name for virtual list items.
+   * Defaults to 'key'. Set to 'id' or any other field your items use.
+   */
+  keyField: {
+    type: String,
+    default: "key"
+  },
   autoScrollThreshold: {
     type: Number,
     default: 200
   }
-}, z = /* @__PURE__ */ I({
+}, I = /* @__PURE__ */ H({
   name: "VkBubbleList",
   inheritAttrs: !1,
   __name: "index",
-  props: fe,
-  setup(s, { expose: f }) {
-    const l = s, n = p();
-    return N(() => l.elRef, (a) => {
-      a && a(n.value);
-    }, { immediate: !0 }), f({
-      scrollToTop: () => n.value?.scrollToTop(),
-      scrollToBottom: () => n.value?.scrollToBottom(),
-      scrollToBubble: (a) => n.value?.scrollToBubble(a)
-    }), (a, y) => (c(), h(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(() => [
-        r(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), V({
-              content: o(({ item: i }) => [
-                d(u(Q), {
-                  source: [i]
+              content: o(({ item: u }) => [
+                b(f(ae), {
+                  source: [u]
                 }, null, 8, ["source"])
               ]),
               _: 2
             }, [
               a.$slots.avatar ? {
                 name: "avatar",
-                fn: o((i) => [
-                  r(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) => [
-                  r(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) => [
-                  r(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) => [
-                  r(a.$slots, "footer", B(w(i)))
+                fn: o((u) => [
+                  i(a.$slots, "footer", S(T(u)))
                 ]),
                 key: "3"
               } : void 0
-            ]), 1040, ["max-height", "scrollbar-append-to", "virtual", "auto-scroll-threshold", "style", "list"])
+            ]), 1040, ["max-height", "scrollbar-append-to", "virtual", "key-field", "auto-scroll-threshold", "style", "list"])
           ]),
           _: 3
         })
@@ -451,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 = (s) => {
-  s.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
 };