@artmate/chat/dist/es/conversations/index.vue.js

借鉴字节开源react库AntX，通过vue实现的版本

import { defineComponent as E, computed as f, createElementBlock as n, openBlock as t, normalizeStyle as p, normalizeClass as A, Fragment as c, renderList as v, unref as C, createElementVNode as L, createBlock as o, resolveDynamicComponent as T, withCtx as r, createTextVNode as V, toDisplayString as j, renderSlot as y } from "vue";
import { useNamespace as w } from "../hooks/useNamespace.js";
import K from "./GroupTitle.vue.js";
import O from "./hooks/useGroupable.js";
import h from "./item.vue.js";
/* empty css          */
const R = /* @__PURE__ */ E({
  __name: "index",
  props: {
    style: {},
    className: {},
    direction: {},
    groupable: { type: [Boolean, Object] },
    items: {},
    defaultActiveKey: {},
    activeKey: {},
    onActiveChange: { type: Function },
    classNames: {},
    styles: {},
    menu: { type: [Function, Array] }
  },
  emits: ["update:activeKey"],
  setup(B, { emit: F }) {
    const e = B, G = F, u = w("conversations"), b = f(
      () => e.activeKey || e.defaultActiveKey || ""
    ), [S, x] = O(e.groupable, e.items), z = f(() => [
      u.b(),
      e.className,
      {
        [u.b("rtl")]: e.direction === "rtl"
      }
    ]), _ = (a) => {
      e.onActiveChange && e.onActiveChange(a.key) === !1 || G("update:activeKey", a.key);
    };
    return (a, D) => (t(), n("ul", {
      class: A(z.value),
      style: p(e.style)
    }, [
      (t(!0), n(c, null, v(C(S), (i, $) => {
        var N;
        return t(), n(c, { key: $ }, [
          C(x) ? (t(), n(c, { key: 0 }, [
            (t(), n("li", {
              key: i.name || `key-${$}`
            }, [
              i.title ? (t(), o(T(
                (N = i.title) == null ? void 0 : N.call(i, i.name, {
                  components: { GroupTitle: K }
                })
              ), { key: 0 })) : (t(), o(K, {
                key: i.name
              }, {
                default: r(() => [
                  V(j(i.name), 1)
                ]),
                _: 2
              }, 1024))
            ])),
            L("ul", {
              class: A([C(u).b("list")])
            }, [
              (t(!0), n(c, null, v(i.data, (s, d) => {
                var l, m;
                return t(), o(h, {
                  key: s.key || `key-${d}`,
                  active: b.value === s.key,
                  "class-name": (l = e.classNames) == null ? void 0 : l.item,
                  direction: e.direction,
                  info: s,
                  menu: typeof e.menu == "function" ? e.menu(s) : e.menu,
                  style: p((m = e.styles) == null ? void 0 : m.item),
                  onClick: _
                }, {
                  label: r(({ item: k }) => [
                    y(a.$slots, "item", { item: k })
                  ]),
                  icon: r(() => [
                    y(a.$slots, "icon")
                  ]),
                  _: 2
                }, 1032, ["active", "class-name", "direction", "info", "menu", "style"]);
              }), 128))
            ], 2)
          ], 64)) : (t(!0), n(c, { key: 1 }, v(i.data, (s, d) => {
            var l, m;
            return t(), o(h, {
              key: s.key || `key-${d}`,
              active: b.value === s.key,
              "class-name": (l = e.classNames) == null ? void 0 : l.item,
              direction: e.direction,
              info: s,
              menu: typeof e.menu == "function" ? e.menu(s) : e.menu,
              style: p((m = e.styles) == null ? void 0 : m.item),
              onClick: _
            }, {
              label: r(({ item: k }) => [
                y(a.$slots, "item", { item: k })
              ]),
              icon: r(() => [
                y(a.$slots, "icon")
              ]),
              _: 2
            }, 1032, ["active", "class-name", "direction", "info", "menu", "style"]);
          }), 128))
        ], 64);
      }), 128))
    ], 6));
  }
});
export {
  R as default
};