ant-design-x-vue/es/conversations/Conversations.mjs

Craft AI-driven interfaces effortlessly

import { defineComponent as $, mergeDefaults as S, toRef as m, ref as G, computed as n, watch as V, createVNode as s, mergeProps as X } from "vue";
import { a as j, c as v } from "../attachments/Attachments2.mjs";
import w from "../_util/pick-attrs.mjs";
import F from "./ConversationsItem.mjs";
import y from "./GroupTitle.mjs";
import M from "../_util/hooks/useMergedState.mjs";
import R from "../x-provider/hooks/use-x-provider-context.mjs";
import "../x-provider/context.mjs";
import "ant-design-vue";
import T from "./hooks/useGroupable.mjs";
import D from "../_util/hooks/use-x-component-config.mjs";
import L from "./style/index.mjs";
import { GroupTitleContextProvider as q } from "./context.mjs";
const _ = /* @__PURE__ */ $({
  name: "AXConversations",
  __name: "Conversations",
  props: S({
    items: null,
    activeKey: null,
    defaultActiveKey: null,
    onActiveChange: {
      type: Function
    },
    menu: {
      type: Function
    },
    groupable: null,
    styles: null,
    classNames: null,
    prefixCls: null,
    rootClassName: null
  }, {
    styles: () => ({}),
    classNames: () => ({})
  }),
  setup(e) {
    const C = j(e, ["prefixCls", "rootClassName", "items", "activeKey", "defaultActiveKey", "onActiveChange", "menu", "styles", "classNames", "groupable", "class", "style"]);
    m(e, "class"), m(e, "activeKey"), m(e, "prefixCls");
    const c = G(e.activeKey), f = n(() => w(C, {
      attr: !0,
      aria: !0,
      data: !0
    })), [d, x] = M(e.defaultActiveKey, {
      value: c
    });
    V(() => e.activeKey, () => {
      c.value = e.activeKey;
    });
    const u = T(() => e.groupable, () => e.items), {
      getPrefixCls: k,
      direction: r
    } = R(), l = n(() => k("conversations", e.prefixCls)), i = D("conversations"), [K, A, N] = L(l), g = n(() => v(l.value, i.value.className, e.class, e.rootClassName, A.value, N, {
      [`${l.value}-rtl`]: r.value === "rtl"
    })), P = (t) => {
      x(t.key), e.onActiveChange && e.onActiveChange(t.key);
    };
    return () => K(s("ul", X(f.value, {
      style: {
        ...typeof i.value.style == "object" ? i.value.style : {},
        ...typeof e.style == "object" ? e.style : {}
      },
      class: g.value
    }), [u.value.groupList.map((t, b) => {
      const o = t.data.map((a, h) => s(F, {
        key: a.key || `key-${h}`,
        info: a,
        prefixCls: l.value,
        direction: r.value,
        class: v(e.classNames.item, i.value.classNames.item),
        style: {
          ...i.value.styles.item,
          ...e.styles.item
        },
        menu: typeof e.menu == "function" ? e.menu(a) : e.menu,
        active: d.value === a.key,
        onClick: P
      }, null));
      return u.value.enableGroup ? s("li", {
        key: t.name || `key-${b}`
      }, [s(q, {
        value: {
          prefixCls: l.value
        }
      }, {
        default: () => {
          var a;
          return [((a = t.title) == null ? void 0 : a.call(t, t.name, {
            components: {
              GroupTitle: y
            }
          })) || s(y, {
            key: t.name
          }, {
            default: () => [t.name]
          })];
        }
      }), s("ul", {
        class: `${l.value}-list`
      }, [o])]) : o;
    })]));
  }
});
export {
  _ as default
};