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

Craft AI-driven interfaces effortlessly

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