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

Craft AI-driven interfaces effortlessly

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