ant-design-x-vue/es/bubble/BubbleList.mjs

Craft AI-driven interfaces effortlessly

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