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

Craft AI-driven interfaces effortlessly

import { defineComponent as O, toRef as b, useSlots as X, ref as m, watch as h, unref as z, watchEffect as H, computed as o, createVNode as l, isVNode as N, Fragment as L, toValue as i, mergeProps as D } from "vue";
import { c as G, _ as J } from "../chunks/helper-chunk.mjs";
import { Avatar as K } from "ant-design-vue";
import M from "../_util/hooks/use-x-component-config.mjs";
import "../x-provider/index.mjs";
import Q from "./hooks/useTypedEffect.mjs";
import U from "./hooks/useTypingConfig.mjs";
import W from "./loading.mjs";
import Y from "./style/index.mjs";
import { useBubbleContextInject as Z } from "./context.mjs";
import p from "../x-provider/hooks/use-x-provider-context.mjs";
const _ = /* @__PURE__ */ O({
  name: "AXBubble",
  __name: "Bubble",
  props: {
    prefixCls: {
      type: String,
      required: !1
    },
    rootClassName: {
      type: String,
      required: !1
    },
    styles: {
      type: Object,
      required: !1,
      default: () => ({})
    },
    classNames: {
      type: Object,
      required: !1,
      default: () => ({})
    },
    avatar: {
      type: [Object, Function],
      required: !1
    },
    placement: {
      type: String,
      required: !1,
      default: "start"
    },
    loading: {
      type: Boolean,
      required: !1,
      default: !1
    },
    typing: {
      type: null,
      required: !1
    },
    content: {
      type: null,
      required: !1,
      default: ""
    },
    messageRender: {
      type: Function,
      required: !1
    },
    loadingRender: {
      type: Function,
      required: !1
    },
    variant: {
      type: String,
      required: !1,
      default: "filled"
    },
    shape: {
      type: String,
      required: !1
    },
    _key: {
      type: [Number, String],
      required: !1
    },
    onTypingComplete: {
      type: null,
      required: !1
    },
    header: {
      type: null,
      required: !1
    },
    footer: {
      type: null,
      required: !1
    }
  },
  setup(e, {
    expose: q
  }) {
    const x = G(e, ["prefixCls", "rootClassName", "classNames", "styles", "avatar", "placement", "loading", "loadingRender", "typing", "content", "messageRender", "variant", "shape", "onTypingComplete", "header", "footer", "_key"]);
    b(e, "content"), b(e, "prefixCls");
    const a = X(), v = m(e.content);
    h(() => e.content, () => {
      v.value = e.content;
    });
    const {
      onUpdate: u
    } = z(Z()), g = m(null), {
      direction: R,
      getPrefixCls: $
    } = p(), t = $("bubble", e.prefixCls), n = M("bubble"), [S, k, T, C] = U(() => e.typing), [r, f] = Q(v, S, k, T), c = m(!1);
    h(r, () => {
      u == null || u();
    }), H(() => {
      var s;
      !f.value && !e.loading ? c.value || (c.value = !0, (s = e.onTypingComplete) == null || s.call(e)) : c.value = !1;
    });
    const [B, P, V] = Y(() => t), w = o(() => [t, e.rootClassName, n.value.className, P.value, V, `${t}-${e.placement}`, {
      [`${t}-rtl`]: R.value === "rtl"
    }, {
      [`${t}-typing`]: f.value && !e.loading && !e.messageRender && !a.message && !C.value
    }]), A = (s) => Array.isArray(s) && s.every(N), E = o(() => a.avatar ? a.avatar() : typeof e.avatar == "function" ? e.avatar() : N(e.avatar) || A(e.avatar) ? e.avatar : l(K, e.avatar, null)), j = o(() => a.message ? a.message({
      content: r.value
    }) : e.messageRender ? e.messageRender(r.value) : r.value), F = o(() => e.loading ? a.loading ? a.loading() : e.loadingRender ? e.loadingRender() : l(W, {
      prefixCls: t
    }, null) : l(L, null, [j.value, f.value && i(C)])), I = o(() => {
      const s = l("div", {
        style: {
          ...n.value.styles.content,
          ...e.styles.content
        },
        class: [`${t}-content`, `${t}-content-${e.variant}`, {
          [`${t}-content-${e.shape}`]: e.shape
        }, n.value.classNames.content, e.classNames.content]
      }, [i(F)]), d = a.header ? a.header({
        content: r.value,
        info: {
          key: e._key
        }
      }) : typeof e.header == "function" ? e.header(r.value, {
        key: e._key
      }) : e.header, y = a.footer ? a.footer({
        content: r.value,
        info: {
          key: e._key
        }
      }) : typeof e.footer == "function" ? e.footer(r.value, {
        key: e._key
      }) : e.footer;
      return d || y ? l("div", {
        class: `${t}-content-wrapper`
      }, [d && l("div", {
        class: [`${t}-header`, n.value.classNames.header, e.classNames.header],
        style: {
          ...n.value.styles.header,
          ...e.styles.header
        }
      }, [d]), s, y && l("div", {
        class: [`${t}-footer`, n.value.classNames.footer, e.classNames.footer],
        style: {
          ...n.value.styles.footer,
          ...e.styles.footer
        }
      }, [y])]) : s;
    });
    return q({
      nativeElement: g
    }), () => B(l("div", D({
      style: {
        ...n.value.style
        // ...(style as object),
      },
      class: i(w)
    }, x, {
      ref: g
    }), [(a.avatar || e.avatar) && l("div", {
      style: {
        ...n.value.styles.avatar,
        ...e.styles.avatar
      },
      class: [`${t}-avatar`, n.value.classNames.avatar, e.classNames.avatar]
    }, [i(E)]), i(I)]));
  }
}), ce = /* @__PURE__ */ J(_, [["__file", "/Users/wangzhichao/办公/code/github/ant-design-x-vue-pure/ant-design-x-vue/src/bubble/Bubble.vue"]]);
export {
  ce as default
};