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, watchEffect as Q, onWatcherCleanup as Y, unref as o, nextTick as Z, createVNode as x } from "vue";
import { a as k, c as b } from "../attachments/Attachments2.mjs";
import { useEventCallback as _ } from "../_util/hooks/use-event-callback.mjs";
import tt from "../_util/pick-attrs.mjs";
import "../x-provider/index.mjs";
import et from "./Bubble.mjs";
import ot from "./hooks/useDisplayData.mjs";
import st 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 rt from "../x-provider/hooks/use-x-provider-context.mjs";
const nt = 1, Rt = /* @__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: N
  }) {
    const w = k(s, ["prefixCls", "rootClassName", "items", "autoScroll", "roles"]);
    p(s, "roles"), p(s, "items"), p(s, "prefixCls");
    const B = G(), a = J(), L = A(() => tt(v(w, B), {
      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
    } = rt(), I = H("bubble", s.prefixCls), E = `${I}-list`, [U, $, z] = at(I), [X, D] = S(!1);
    Q(() => {
      D(!0), Y(() => {
        D(!1);
      });
    });
    const y = st(R, P), [m, K] = ot(y), [T, C] = S(!0), [h, V] = S(0), M = (t) => {
      const l = t.target;
      C(l.scrollHeight - Math.abs(l.scrollTop) - l.clientHeight <= nt);
    };
    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 l = (t = o(m)[o(m).length - 2]) == null ? void 0 : t.key, e = o(u)[l];
        if (e) {
          const {
            nativeElement: n
          } = e, {
            top: c = 0,
            bottom: f = 0
          } = (n == null ? void 0 : n.getBoundingClientRect()) ?? {}, {
            top: r,
            bottom: j
          } = o(i).getBoundingClientRect();
          c < j && f > r && (V(o(h) + 1), C(!0));
        }
      }
    });
    const O = _(() => {
      s.autoScroll && V(o(h) + 1);
    }), W = A(() => ({
      onUpdate: O
    }));
    return N({
      nativeElement: i,
      scrollTo: ({
        key: t,
        offset: l,
        behavior: e = "smooth",
        block: n
      }) => {
        if (typeof l == "number")
          o(i).scrollTo({
            top: l,
            behavior: e
          });
        else if (t !== void 0) {
          const c = o(u)[t];
          if (c) {
            const f = o(m).findIndex((r) => r.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(L.value, {
        class: b(E, s.rootClassName, $.value, z, {
          [`${E}-reach-end`]: T.value
        }),
        ref: i,
        onScroll: M
      }), [o(m).map(({
        key: t,
        onTypingComplete: l,
        ...e
      }) => {
        var n, c, f;
        return x(et, v(e, {
          avatar: a.avatar ? () => {
            var r;
            return (r = a.avatar) == null ? void 0 : r.call(a, {
              item: {
                key: t,
                ...e
              }
            });
          } : e.avatar,
          header: ((n = a.header) == null ? void 0 : n.call(a, {
            item: {
              key: t,
              ...e
            }
          })) ?? e.header,
          footer: ((c = a.footer) == null ? void 0 : c.call(a, {
            item: {
              key: t,
              ...e
            }
          })) ?? e.footer,
          loadingRender: a.loading ? () => a.loading({
            item: {
              key: t,
              ...e
            }
          }) : e.loadingRender,
          content: ((f = a.message) == null ? void 0 : f.call(a, {
            item: {
              key: t,
              ...e
            }
          })) ?? e.content,
          key: t,
          ref: (r) => {
            r ? u.value[t] = r : delete u.value[t];
          },
          typing: X.value ? e.typing : !1,
          onTypingComplete: () => {
            l == null || l(), K(t);
          }
        }), null);
      })])]
    }));
  }
});
export {
  Rt as default
};