@artmate/chat/dist/es/bubble/index.vue.js

借鉴字节开源react库AntX，通过vue实现的版本

import { defineComponent as I, useSlots as O, ref as L, computed as M, watch as z, createElementBlock as l, openBlock as n, normalizeClass as i, unref as t, createCommentVNode as v, normalizeStyle as y, renderSlot as f, createBlock as o, resolveDynamicComponent as p, createElementVNode as q, Fragment as m } from "vue";
import { ElAvatar as G } from "element-plus";
import { useNamespace as J } from "../hooks/useNamespace.js";
import K from "./hooks/useTypedEffect.js";
import P from "./hooks/useTypingConfig.js";
import w from "./loading.vue.js";
/* empty css             */
const Q = ["innerHTML"], W = ["innerHTML"], ne = /* @__PURE__ */ I({
  __name: "index",
  props: {
    avatar: { default: "" },
    classNames: {},
    content: { default: "" },
    loading: { type: Boolean, default: !1 },
    loadingRender: { type: Function, default: void 0 },
    messageRender: {},
    onTypingComplete: {},
    onUpdate: {},
    placement: { default: "start" },
    shape: {},
    styles: { default: () => ({}) },
    typing: { type: [Boolean, Object], default: !1 },
    variant: { default: "filled" }
  },
  setup(F, { expose: U }) {
    const e = F, s = J("bubble"), r = O(), g = L(), [V, j, A] = P(e.typing), D = M(() => e.content), [c, k] = K(D, V, j, A);
    z(
      () => c.value,
      () => {
        var a;
        (a = e.onUpdate) == null || a.call(e);
      }
    );
    const d = M(() => {
      var a;
      return e.messageRender ? e.messageRender(((a = c.value) == null ? void 0 : a.call(c)) ?? "") : c.value;
    }), u = L(!1);
    z(
      () => k.value || e.loading,
      () => {
        var a;
        !k.value && !e.loading ? u.value || (u.value = !0, (a = e.onTypingComplete) == null || a.call(e)) : u.value = !1;
      }
    );
    const b = (a) => typeof a == "string";
    return U({
      nativeElement: g
    }), (a, X) => {
      var h, $, R, T, N, C, E, B, S, H;
      return n(), l("div", {
        ref_key: "divRef",
        ref: g,
        class: i([t(s).b(), t(s).b(a.placement)])
      }, [
        t(r).avatar || a.avatar ? (n(), l("div", {
          key: 0,
          class: i([t(s).b("avatar"), (h = e.classNames) == null ? void 0 : h.avatar]),
          style: y(($ = e.styles) == null ? void 0 : $.avatar)
        }, [
          f(a.$slots, "avatar", {}, () => [
            typeof a.avatar == "string" ? (n(), o(t(G), {
              key: 0,
              size: 32,
              src: a.avatar
            }, null, 8, ["src"])) : (n(), o(p(a.avatar), { key: 1 }))
          ])
        ], 6)) : v("", !0),
        t(r).header || t(r).footer ? (n(), l("div", {
          key: 1,
          class: i([t(s).b("content-wrapper")])
        }, [
          t(r).header ? (n(), l("div", {
            key: 0,
            class: i([t(s).b("header"), (R = e.classNames) == null ? void 0 : R.header]),
            style: y((T = e.styles) == null ? void 0 : T.header)
          }, [
            f(a.$slots, "header")
          ], 6)) : v("", !0),
          q("div", {
            class: i([t(s).b("content"), t(s).b(`content-${e.variant}`), (N = e.classNames) == null ? void 0 : N.content, e.shape && t(s).b(`content-${e.placement}-${e.shape}`)]),
            style: y((C = e.styles) == null ? void 0 : C.content)
          }, [
            e.loading ? (n(), l(m, { key: 0 }, [
              t(r).loading ? f(a.$slots, "loading", { key: 0 }) : a.loadingRender ? (n(), o(p(a.loadingRender()), { key: 1 })) : (n(), o(w, {
                key: 2,
                "prefix-cls": t(s).b()
              }, null, 8, ["prefix-cls"]))
            ], 64)) : (n(), l(m, { key: 1 }, [
              b(d.value) ? (n(), l("div", {
                key: 1,
                innerHTML: d.value
              }, null, 8, Q)) : (n(), o(p(d.value), { key: 0 }))
            ], 64))
          ], 6),
          t(r).footer ? (n(), l("div", {
            key: 1,
            class: i([t(s).b("footer"), (E = e.classNames) == null ? void 0 : E.footer]),
            style: y((B = e.styles) == null ? void 0 : B.footer)
          }, [
            f(a.$slots, "footer")
          ], 6)) : v("", !0)
        ], 2)) : (n(), l("div", {
          key: 2,
          class: i([t(s).b("content"), t(s).b(`content-${e.variant}`), (S = e.classNames) == null ? void 0 : S.content, e.shape && t(s).b(`content-${e.placement}-${e.shape}`)]),
          style: y((H = e.styles) == null ? void 0 : H.content)
        }, [
          e.loading ? (n(), l(m, { key: 0 }, [
            t(r).loading ? f(a.$slots, "loading", { key: 0 }) : a.loadingRender ? (n(), o(p(a.loadingRender()), { key: 1 })) : (n(), o(w, {
              key: 2,
              "prefix-cls": t(s).b()
            }, null, 8, ["prefix-cls"]))
          ], 64)) : (n(), l(m, { key: 1 }, [
            b(d.value) ? (n(), l("div", {
              key: 1,
              innerHTML: d.value
            }, null, 8, W)) : (n(), o(p(d.value), { key: 0 }))
          ], 64))
        ], 6))
      ], 2);
    };
  }
});
export {
  ne as default
};