jadq-x-vue/es/bubble/BubbleList.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as G, mergeDefaults as J, toRef as v, useAttrs as Q, useSlots as W, computed as A, mergeProps as x, ref as d, watch as g, watchPostEffect as Y, unref as e, nextTick as Z, createVNode as S, renderList as k } from "vue";
import { c as b } from "../chunks/helper-chunk.mjs";
import { b as _ } from "../chunks/module-chunk.mjs";
import { useEventCallback as tt } from "../_util/hooks/use-event-callback.mjs";
import et from "../_util/pick-attrs.mjs";
import "../x-provider/index.mjs";
import ot from "./Bubble.mjs";
import st from "./hooks/useDisplayData.mjs";
import rt from "./hooks/useListData.mjs";
import lt from "./style/index.mjs";
import R from "../_util/hooks/use-state.mjs";
import { BubbleContextProvider as at } from "./context.mjs";
import nt from "../x-provider/hooks/use-x-provider-context.mjs";
const it = 1, It = /* @__PURE__ */ G({
  name: "AXBubbleList",
  inheritAttrs: !1,
  __name: "BubbleList",
  props: J({
    prefixCls: null,
    rootClassName: null,
    items: null,
    autoScroll: {
      type: Boolean
    },
    roles: null
  }, {
    autoScroll: !0
  }),
  setup(s, {
    expose: B
  }) {
    const L = b(s, ["prefixCls", "rootClassName", "items", "autoScroll", "roles"]);
    v(s, "roles"), v(s, "items"), v(s, "prefixCls");
    const N = Q(), r = W(), w = A(() => et(x(L, N), {
      attr: !0,
      aria: !0
    })), P = d(s.items), I = d(s.roles);
    g(() => s.items, () => {
      P.value = s.items;
    }), g(() => s.roles, () => {
      I.value = s.roles;
    });
    const a = d(null), u = d({}), {
      getPrefixCls: H
    } = nt(), E = H("bubble", s.prefixCls), T = `${E}-list`, [U, $, z] = lt(E), [X, D] = R(!1);
    Y((t) => {
      D(!0), t(() => {
        D(!1);
      });
    });
    const y = rt(P, I), [m, K] = st(y), [C, h] = R(!0), [p, V] = R(0), M = (t) => {
      const l = t.target;
      h(l.scrollHeight - Math.abs(l.scrollTop) - l.clientHeight <= it);
    }, O = () => {
      e(a) && e(a).scrollTo({
        top: e(a).scrollHeight
      });
    };
    g([p, a, C], () => {
      s.autoScroll && e(a) && e(C) && Z(() => {
        e(a).scrollTo({
          top: e(a).scrollHeight
        });
      });
    }), g(() => e(m).length, () => {
      var t;
      if (s.autoScroll) {
        const l = (t = e(m)[e(m).length - 2]) == null ? void 0 : t.key, o = e(u)[l];
        if (o) {
          const {
            nativeElement: i
          } = o, {
            top: c = 0,
            bottom: f = 0
          } = (i == null ? void 0 : i.getBoundingClientRect()) ?? {}, {
            top: n,
            bottom: F
          } = e(a).getBoundingClientRect();
          c < F && f > n && (V(e(p) + 1), h(!0));
        }
      }
    });
    const j = tt(() => {
      s.autoScroll && V(e(p) + 1);
    }), q = A(() => ({
      onUpdate: j
    }));
    return B({
      nativeElement: a,
      scrollBottom: O,
      scrollTo: ({
        key: t,
        offset: l,
        behavior: o = "smooth",
        block: i
      }) => {
        if (typeof l == "number")
          e(a).scrollTo({
            top: l,
            behavior: o
          });
        else if (t !== void 0) {
          const c = e(u)[t];
          if (c) {
            const f = e(m).findIndex((n) => n.key === t);
            h(f === e(m).length - 1), c.nativeElement.scrollIntoView({
              behavior: o,
              block: i
            });
          }
        }
      }
    }), () => U(S(at, {
      value: q.value
    }, {
      default: () => [S("div", x(w.value, {
        class: _(T, s.rootClassName, $.value, z, {
          [`${T}-reach-end`]: C.value
        }),
        ref: a,
        onScroll: M
      }), [k(e(m), ({
        key: t,
        onTypingComplete: l,
        ...o
      }) => {
        var i, c, f;
        return S(ot, x(o, {
          avatar: r.avatar ? () => {
            var n;
            return (n = r.avatar) == null ? void 0 : n.call(r, {
              item: {
                key: t,
                ...o
              }
            });
          } : o.avatar,
          header: ((i = r.header) == null ? void 0 : i.call(r, {
            item: {
              key: t,
              ...o
            }
          })) ?? o.header,
          footer: ((c = r.footer) == null ? void 0 : c.call(r, {
            item: {
              key: t,
              ...o
            }
          })) ?? o.footer,
          loadingRender: r.loading ? () => r.loading({
            item: {
              key: t,
              ...o
            }
          }) : o.loadingRender,
          content: ((f = r.message) == null ? void 0 : f.call(r, {
            item: {
              key: t,
              ...o
            }
          })) ?? o.content,
          key: t,
          ref: (n) => {
            n ? u.value[t] = n : delete u.value[t];
          },
          typing: X.value ? o.typing : !1,
          onTypingComplete: () => {
            l == null || l(), K(t);
          }
        }), null);
      })])]
    }));
  }
});
export {
  It as default
};