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

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

import { defineComponent as $, useSlots as z, ref as u, watch as m, nextTick as R, onMounted as F, createElementBlock as T, openBlock as g, normalizeClass as M, unref as d, Fragment as P, renderList as _, createBlock as A, mergeProps as K, createSlots as O, withCtx as U, renderSlot as W } from "vue";
import j from "../bubble/index.vue.js";
/* empty css                   */
import { useNamespace as q } from "../hooks/useNamespace.js";
import G from "./hooks/useDisplayData.js";
import J from "./hooks/useListData.js";
const Q = 1, se = /* @__PURE__ */ $({
  __name: "index",
  props: {
    autoScroll: { type: Boolean, default: !0 },
    className: {},
    items: { default: () => [] },
    roles: {},
    rootClassName: {}
  },
  setup(B, { expose: S }) {
    const n = B, y = q("bubble-list"), k = z(), I = u(!0), i = u(!1), p = u(0), s = u(), f = u({}), { ListData: h, setListData: D } = J(n.items, n.roles), [r, x, L] = G(h);
    m(
      () => n.items,
      () => {
        D(n.items);
      }
    ), m(
      () => h.value,
      () => {
        L();
      }
    );
    const N = (e) => {
      const t = e.target;
      i.value = t.scrollHeight - Math.abs(t.scrollTop) - t.clientHeight <= Q;
    };
    m(
      () => p.value,
      () => {
        n.autoScroll && s.value && i.value && s.value.scrollTo({
          top: s.value.scrollHeight
        });
      }
    ), m(
      () => r.value.length,
      () => {
        R(() => {
          var e;
          if (n.autoScroll) {
            const t = (e = r.value[r.value.length - 2]) == null ? void 0 : e.key, o = f.value[t];
            if (o) {
              const { nativeElement: l } = o, { top: a = 0, bottom: c = 0 } = (l == null ? void 0 : l.getBoundingClientRect()) ?? {}, { top: v, bottom: V } = s.value.getBoundingClientRect();
              a < V && c > v && (p.value += 1, i.value = !0);
            }
          }
        });
      }
    );
    const E = () => {
      n.autoScroll && (p.value = p.value + 1);
    }, H = (e) => {
      var t;
      e != null && e.key && ((t = e == null ? void 0 : e.onTypingComplete) == null || t.call(e), x(e.key));
    }, C = ({ key: e, offset: t, behavior: o = "smooth", block: l }) => {
      if (typeof t == "number")
        s.value.scrollTo({
          top: t,
          behavior: o
        });
      else if (e !== void 0) {
        const a = f.value[e];
        if (a) {
          const c = r.value.findIndex((v) => v.key === e);
          i.value = c === r.value.length - 1, a.$el.scrollIntoView({
            behavior: o,
            block: l
          });
        }
      }
    }, w = (e, t) => {
      t != null && (e ? Reflect.set(f.value, t, e) : Reflect.deleteProperty(f.value, t));
    };
    return F(() => {
      R(() => {
        C({ offset: s.value.scrollHeight, behavior: "auto" });
      });
    }), S({
      nativeElement: s.value,
      scrollTo: C
    }), (e, t) => (g(), T("div", {
      ref_key: "listRef",
      ref: s,
      class: M([d(y).b(), e.rootClassName, e.className, i.value && d(y).b("reach-end")]),
      onScroll: N
    }, [
      (g(!0), T(P, null, _(d(r), (o) => (g(), A(j, K({
        key: o.key,
        ref_for: !0
      }, o, {
        ref_for: !0,
        ref: (l) => w(l, o.key),
        "on-typing-complete": () => H(o),
        "on-update": E,
        typing: I.value ? o.typing : !1
      }), O({ _: 2 }, [
        _(k, (l, a) => ({
          name: a,
          fn: U((c) => [
            W(e.$slots, a, {
              info: { ...c, ...o }
            })
          ])
        }))
      ]), 1040, ["on-typing-complete", "typing"]))), 128))
    ], 34));
  }
});
export {
  se as default
};