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

Craft AI-driven interfaces effortlessly

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