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

Craft AI-driven interfaces effortlessly

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