@vunk/plus 1.10.0 → 1.10.2

package/components/bubble-list/index.mjs

@@ -1,10 +1,414 @@
-export { a8 as VkBubbleList, a9 as __VkBubbleList, a8 as default } from '../index3.mjs';
+import { openBlock, createElementBlock, createStaticVNode, defineComponent, ref, onMounted, watch, computed, resolveComponent, createVNode, withCtx, Fragment, renderList, createBlock, normalizeClass, createSlots, renderSlot, withDirectives, createElementVNode, normalizeStyle, createCommentVNode, vShow, mergeProps, normalizeProps, guardReactiveProps } from 'vue';
+import { VkBubbleRenderer, VkBubbleRenderTemplates, VkBubbleTemplates } from '@vunk/plus/components/bubble-templates';
+import { ElAutoResizer } from 'element-plus';
+import { a as arrow_down_bold_default } from '../index3.mjs';
+import { useResizeObserver } from '@vueuse/core';
+import { VkScrollbar } from '@vunk/plus/components/scrollbar';
+import { Bubble } from 'vue-element-plus-x';
+import { _ as _export_sfc } from '../_plugin-vue_export-helper.mjs';
+import { noop } from '@vunk/shared/function';
 export { Role } from '@vunk/plus/components/agent-chat-provider';
-import 'vue';
-import '@vunk/plus/components/bubble-templates';
-import 'element-plus';
-import '../index4.mjs';
-import '@vueuse/core';
-import '@vunk/plus/components/scrollbar';
-import '../_plugin-vue_export-helper.mjs';
-import '@vunk/shared/function';
+
+const _sfc_main$2 = {};
+
+const _hoisted_1$1 = {
+  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 _sfc_render$2(_ctx, _cache) {
+  return (openBlock(), createElementBlock("svg", _hoisted_1$1, _cache[0] || (_cache[0] = [
+    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)
+  ])))
+}
+var loadingBg = /*#__PURE__*/_export_sfc(_sfc_main$2, [['render',_sfc_render$2],['__file',"/home/runner/work/vunk-plus/vunk-plus/packages/components/bubble-list/src/core/loading.vue"]]);
+
+var _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    autoScrollThreshold: {
+      type: Number,
+      default: 200
+    },
+    maxHeight: {
+      type: String,
+      default: ""
+    },
+    alwaysShowScrollbar: {
+      type: Boolean,
+      default: false
+    },
+    backButtonThreshold: {
+      type: Number,
+      default: 80
+    },
+    showBackButton: {
+      type: Boolean,
+      default: true
+    },
+    backButtonPosition: {
+      type: Object,
+      default: () => {
+        return { bottom: "20px", left: "calc(50% - 19px)" };
+      }
+    },
+    btnLoading: {
+      type: Boolean,
+      default: true
+    },
+    btnColor: {
+      type: String,
+      default: "#409EFF"
+    },
+    btnIconSize: {
+      type: Number,
+      default: 24
+    },
+    scrollbarAppendTo: {
+      type: null,
+      default: void 0
+    }
+  },
+  emits: {
+    complete: null
+  },
+  setup(__props, { expose: __expose }) {
+    const props = __props;
+    const scrollbarRef = ref();
+    function initStyle() {
+      document.documentElement.style.setProperty(
+        "--el-bubble-list-max-height",
+        props.maxHeight || "100%"
+      );
+      document.documentElement.style.setProperty(
+        "--el-bubble-list-btn-size",
+        `${props.btnIconSize}px`
+      );
+    }
+    onMounted(() => {
+      initStyle();
+    });
+    watch(
+      () => [props.maxHeight, props.btnIconSize],
+      () => {
+        initStyle();
+      }
+    );
+    const distanceToBottom = ref();
+    const scrollViewEl = computed(() => scrollbarRef.value?.wrapRef?.firstElementChild);
+    const btnShow = computed(() => {
+      return props.showBackButton && distanceToBottom.value !== void 0 && distanceToBottom.value > props.backButtonThreshold;
+    });
+    onMounted(() => {
+      setTimeout(getDistanceToBottom);
+    });
+    function getDistanceToBottom() {
+      const el = scrollbarRef.value?.$el;
+      const wrap = scrollbarRef.value?.wrapRef;
+      if (!el || !wrap) {
+        return;
+      }
+      distanceToBottom.value = wrap.scrollHeight - wrap.scrollTop - wrap.clientHeight;
+      return distanceToBottom.value;
+    }
+    function scrollToBottom(...args) {
+      scrollbarRef.value?.scrollToBottom(...args);
+    }
+    function scrollToTop(...args) {
+      scrollbarRef.value?.scrollToTop(...args);
+    }
+    if (props.autoScroll) {
+      useResizeObserver(scrollViewEl, () => {
+        const distance = getDistanceToBottom();
+        if (distance !== void 0 && distance > props.autoScrollThreshold) {
+          return;
+        }
+        scrollToBottom();
+      });
+    }
+    function scrollToBubble(index) {
+      const container = scrollbarRef.value?.wrapRef;
+      if (!container)
+        return;
+      const bubbles = container.querySelectorAll(".el-bubble");
+      if (index >= bubbles.length)
+        return;
+      const targetBubble = bubbles[index];
+      const containerRect = container.getBoundingClientRect();
+      const bubbleRect = targetBubble.getBoundingClientRect();
+      const scrollPosition = bubbleRect.top - containerRect.top + container.scrollTop;
+      container.scrollTo({
+        top: scrollPosition,
+        behavior: "smooth"
+      });
+    }
+    __expose({
+      scrollToTop,
+      scrollToBottom,
+      scrollToBubble
+    });
+    const __returned__ = { props, scrollbarRef, initStyle, distanceToBottom, scrollViewEl, btnShow, getDistanceToBottom, scrollToBottom, scrollToTop, scrollToBubble, get ArrowDownBold() {
+      return arrow_down_bold_default;
+    }, get VkScrollbar() {
+      return VkScrollbar;
+    }, get Bubble() {
+      return Bubble;
+    }, loadingBg };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+const _hoisted_1 = { class: "vk-bubble-list-wrapper" };
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_el_icon = resolveComponent("el-icon");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode($setup["VkScrollbar"], {
+      ref: "scrollbarRef",
+      class: "vk-bubble-list",
+      "append-to": $props.scrollbarAppendTo,
+      always: $props.alwaysShowScrollbar,
+      onScroll: $setup.getDistanceToBottom
+    }, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList($props.list, (item, index) => {
+            return openBlock(), createBlock($setup["Bubble"], {
+              key: item.key || index,
+              content: item.content,
+              placement: item.placement,
+              loading: item.loading,
+              shape: item.shape,
+              variant: item.variant,
+              "is-markdown": item.isMarkdown,
+              "is-fog": item.isFog,
+              typing: item.typing,
+              "max-width": item.maxWidth,
+              avatar: item.avatar,
+              "avatar-size": item.avatarSize,
+              "avatar-gap": item.avatarGap,
+              "avatar-shape": item.avatarShape,
+              "avatar-src-set": item.avatarSrcSet,
+              "avatar-alt": item.avatarAlt,
+              "avatar-fit": item.avatarFit,
+              "no-style": item.noStyle,
+              class: normalizeClass({
+                [`is-${item.role}`]: true
+              })
+            }, createSlots({
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots.avatar ? {
+                name: "avatar",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "avatar", { item })
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.header ? {
+                name: "header",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "header", { item })
+                ]),
+                key: "1"
+              } : void 0,
+              _ctx.$slots.content ? {
+                name: "content",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "content", { item })
+                ]),
+                key: "2"
+              } : void 0,
+              _ctx.$slots.footer ? {
+                name: "footer",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "footer", { item })
+                ]),
+                key: "3"
+              } : void 0,
+              _ctx.$slots.loading ? {
+                name: "loading",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "loading", { item })
+                ]),
+                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
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      _: 3
+      /* FORWARDED */
+    }, 8, ["append-to", "always"]),
+    withDirectives(createElementVNode(
+      "div",
+      {
+        class: normalizeClass(["vk-bubble-list-default-back-button", {
+          "vk-bubble-list-back-to-bottom-solt": _ctx.$slots.backToBottom
+        }]),
+        style: normalizeStyle({
+          bottom: $props.backButtonPosition.bottom,
+          left: $props.backButtonPosition.left
+        }),
+        onClick: $setup.scrollToBottom
+      },
+      [
+        renderSlot(_ctx.$slots, "backToBottom", {}, () => [
+          createVNode(_component_el_icon, {
+            class: "vk-bubble-list-back-to-bottom-icon",
+            style: normalizeStyle({ color: $setup.props.btnColor })
+          }, {
+            default: withCtx(() => [
+              createVNode($setup["ArrowDownBold"]),
+              $setup.props.btnLoading ? (openBlock(), createBlock($setup["loadingBg"], {
+                key: 0,
+                class: "back-to-bottom-loading-svg-bg"
+              })) : createCommentVNode("v-if", true)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["style"])
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    ), [
+      [vShow, $setup.btnShow]
+    ])
+  ]);
+}
+var BubbleList = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/bubble-list/src/core/index.vue"]]);
+
+const props = {
+  items: {
+    type: Array,
+    default: () => []
+  },
+  elRef: {
+    type: Function,
+    default: noop
+  },
+  scrollbarAppendTo: null,
+  autoScrollThreshold: {
+    type: Number,
+    default: 200
+  }
+};
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{
+    name: "VkBubbleList",
+    inheritAttrs: false
+  },
+  __name: "index",
+  props: props,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { get VkBubbleRenderer() {
+      return VkBubbleRenderer;
+    }, get VkBubbleRenderTemplates() {
+      return VkBubbleRenderTemplates;
+    }, get VkBubbleTemplates() {
+      return VkBubbleTemplates;
+    }, get ElAutoResizer() {
+      return ElAutoResizer;
+    }, BubbleList };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock($setup["VkBubbleRenderTemplates"], null, {
+    placeholder: withCtx(() => [
+      createVNode($setup["VkBubbleTemplates"])
+    ]),
+    default: withCtx(() => [
+      renderSlot(_ctx.$slots, "renderer"),
+      createVNode($setup["ElAutoResizer"], null, {
+        default: withCtx(({ height }) => [
+          createVNode($setup["BubbleList"], mergeProps({
+            ref: _ctx.elRef,
+            "btn-icon-size": 18,
+            "max-height": `${height}px`,
+            "scrollbar-append-to": _ctx.scrollbarAppendTo,
+            "auto-scroll-threshold": _ctx.autoScrollThreshold,
+            style: {
+              "--el-bubble-list-max-height": `${height}px`
+            },
+            list: _ctx.items
+          }, _ctx.$attrs), createSlots({
+            content: withCtx(({ item }) => [
+              createVNode($setup["VkBubbleRenderer"], {
+                source: [item]
+              }, null, 8, ["source"])
+            ]),
+            _: 2
+            /* DYNAMIC */
+          }, [
+            _ctx.$slots.avatar ? {
+              name: "avatar",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "avatar", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.header ? {
+              name: "header",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "1"
+            } : void 0,
+            _ctx.$slots.loading ? {
+              name: "loading",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "loading", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "2"
+            } : void 0,
+            _ctx.$slots.footer ? {
+              name: "footer",
+              fn: withCtx((e) => [
+                renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(e)))
+              ]),
+              key: "3"
+            } : void 0
+          ]), 1040, ["max-height", "scrollbar-append-to", "auto-scroll-threshold", "style", "list"])
+        ]),
+        _: 3
+        /* FORWARDED */
+      })
+    ]),
+    _: 3
+    /* FORWARDED */
+  });
+}
+var VkBubbleList = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/vunk-plus/vunk-plus/packages/components/bubble-list/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkBubbleList.install = (app) => {
+  app.component(VkBubbleList.name || "VkBubbleList", VkBubbleList);
+};
+
+export { VkBubbleList, types as __VkBubbleList, VkBubbleList as default };

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

@@ -521,6 +521,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly ArrowDownBold: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     readonly VkScrollbar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
         appendTo: null;
+        hideAfter: {
+            type: NumberConstructor;
+            default: number;
+        };
         ariaLabel: StringConstructor;
         ariaOrientation: {
             readonly type: import("vue").PropType<string>;
@@ -546,6 +550,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     }>, {
         props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
             appendTo: null;
+            hideAfter: {
+                type: NumberConstructor;
+                default: number;
+            };
             ariaLabel: StringConstructor;
             ariaOrientation: {
                 readonly type: import("vue").PropType<string>;
@@ -573,11 +581,18 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 scrollTop: number;
                 scrollLeft: number;
             }) => any) | undefined;
+            onContentInsufficient?: ((_: {
+                vertical: boolean;
+                horizontal: boolean;
+            }) => any) | undefined;
             "onEnd-reached"?: ((direction: import("element-plus").ScrollbarDirection) => any) | undefined;
         }> & {}>;
         emit: ((event: "scroll", args_0: {
             scrollTop: number;
             scrollLeft: number;
+        }) => void) & ((event: "contentInsufficient", _: {
+            vertical: boolean;
+            horizontal: boolean;
         }) => void) & ((event: "end-reached", direction: import("element-plus").ScrollbarDirection) => void);
         COMPONENT_NAME: string;
         ns: {
@@ -610,6 +625,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             right: boolean;
             left: boolean;
         };
+        hasEmittedInsufficient: boolean;
+        stopContentMutationObserver: (() => void) | undefined;
         scrollbarRef: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
         wrapRef: Ref<HTMLDivElement | undefined, HTMLDivElement | undefined>;
         resizeRef: Ref<HTMLElement | undefined, HTMLElement | undefined>;
@@ -627,6 +644,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         setScrollTop: (value: number) => void;
         setScrollLeft: (value: number) => void;
         update: () => void;
+        checkContentInsufficient: () => void;
         scrollToBottom: (options?: ScrollToOptions) => void;
         scrollToTop: (options?: ScrollToOptions) => void;
         readonly VkAsyncTeleport: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
@@ -680,6 +698,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: NumberConstructor;
                 required: true;
             };
+            hideAfter: {
+                type: NumberConstructor;
+                default: number;
+            };
         }>, {
             props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                 always: {
@@ -690,6 +712,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     type: NumberConstructor;
                     required: true;
                 };
+                hideAfter: {
+                    type: NumberConstructor;
+                    default: number;
+                };
             }>> & Readonly<{}> & {}>;
             scrollbar: import("element-plus").ScrollbarContext | undefined;
             moveX: Ref<number, number>;
@@ -709,6 +735,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     required: true;
                 };
                 always: BooleanConstructor;
+                hideAfter: {
+                    type: NumberConstructor;
+                    default: number;
+                };
             }>, {
                 props: import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
                     vertical: BooleanConstructor;
@@ -719,6 +749,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                         required: true;
                     };
                     always: BooleanConstructor;
+                    hideAfter: {
+                        type: NumberConstructor;
+                        default: number;
+                    };
                 }>> & Readonly<{}> & {}>;
                 scrollbar: import("element-plus").ScrollbarContext;
                 ns: {
@@ -792,9 +826,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     required: true;
                 };
                 always: BooleanConstructor;
+                hideAfter: {
+                    type: NumberConstructor;
+                    default: number;
+                };
             }>> & Readonly<{}>, {
                 vertical: boolean;
                 always: boolean;
+                hideAfter: number;
             }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
             always: {
@@ -805,10 +844,19 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                 type: NumberConstructor;
                 required: true;
             };
+            hideAfter: {
+                type: NumberConstructor;
+                default: number;
+            };
         }>> & Readonly<{}>, {
             always: boolean;
+            hideAfter: number;
         }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        contentInsufficient: (_: {
+            vertical: boolean;
+            horizontal: boolean;
+        }) => true;
         'end-reached': (direction: import("element-plus").ScrollbarDirection) => boolean;
         scroll: ({ scrollTop, scrollLeft, }: {
             scrollTop: number;
@@ -816,6 +864,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }) => boolean;
     }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
         appendTo: null;
+        hideAfter: {
+            type: NumberConstructor;
+            default: number;
+        };
         ariaLabel: StringConstructor;
         ariaOrientation: {
             readonly type: import("vue").PropType<string>;
@@ -843,9 +895,14 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             scrollTop: number;
             scrollLeft: number;
         }) => any) | undefined;
+        onContentInsufficient?: ((_: {
+            vertical: boolean;
+            horizontal: boolean;
+        }) => any) | undefined;
         "onEnd-reached"?: ((direction: import("element-plus").ScrollbarDirection) => any) | undefined;
     }>, {
         always: boolean;
+        hideAfter: number;
         height: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
         minSize: number;
         distance: number;