@tencentcloud/roomkit-web-vue3/es/core/components/UserList/index.vue3.mjs

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

import { defineComponent, ref, computed, createElementBlock, openBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeClass, createElementVNode, toDisplayString, createSlots, withCtx, renderSlot, unref } from "vue";
import UserListSearch from "../UserListSearch/index.vue2.mjs";
import UserListContent from "../UserListContent/index.vue2.mjs";
import OnSeatNotification from "./OnSeatNotification/index.vue2.mjs";
import index from "./AllUserActions/index.mjs";
import "../../hooks/useAudioDeviceState/index.mjs";
import "../../hooks/useVideoDeviceState/index.mjs";
import useUserState from "../../hooks/useUserState/index.mjs";
import "@tencentcloud/tuiroom-engine-js";
import "../../../locales/index.mjs";
import "../../../stores/room.mjs";
import "@tencentcloud/uikit-base-component-vue3";
import "../../../utils/environment.mjs";
import "../../../hooks/useZIndex.mjs";
/* empty css                                                    */
import "../../../hooks/useRoomEngine.mjs";
import "../../hooks/useFreeBeautyState/index.mjs";
const _hoisted_1 = { class: "user-list-container" };
const _hoisted_2 = {
  key: 0,
  class: "user-category-content"
};
const _hoisted_3 = ["onClick"];
const _hoisted_4 = { class: "user-category-title" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    sortFn: {},
    userCategoryList: {}
  },
  setup(__props) {
    var _a, _b;
    const props = __props;
    const { userList } = useUserState();
    const activeCategoryKey = ref(
      ((_b = (_a = props.userCategoryList) == null ? void 0 : _a[0]) == null ? void 0 : _b.key) || ""
    );
    const activeCategory = computed(
      () => {
        var _a2;
        return (_a2 = props.userCategoryList) == null ? void 0 : _a2.find((item) => item.key === activeCategoryKey.value);
      }
    );
    function handleSwitchCategory(item) {
      activeCategoryKey.value = item.key;
    }
    const filterUserListObj = computed(() => {
      var _a2;
      const filterUserCategoryObj = {};
      (_a2 = props.userCategoryList) == null ? void 0 : _a2.forEach((item) => {
        if (item.filterFn) {
          filterUserCategoryObj[item.key] = userList.value.filter(item.filterFn);
        } else {
          filterUserCategoryObj[item.key] = userList.value;
        }
      });
      return filterUserCategoryObj;
    });
    return (_ctx, _cache) => {
      var _a2, _b2, _c;
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createVNode(UserListSearch),
        ((_a2 = _ctx.userCategoryList) == null ? void 0 : _a2.length) ? (openBlock(), createElementBlock("div", _hoisted_2, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.userCategoryList, (item, index2) => {
            var _a3;
            return openBlock(), createElementBlock("div", {
              key: index2,
              class: normalizeClass([
                "user-category",
                {
                  "user-category-active": item.key === activeCategoryKey.value
                }
              ]),
              onClick: ($event) => handleSwitchCategory(item)
            }, [
              createElementVNode("span", _hoisted_4, toDisplayString(`${item.title} (${(_a3 = filterUserListObj.value) == null ? void 0 : _a3[item.key].length})`), 1)
            ], 10, _hoisted_3);
          }), 128))
        ])) : createCommentVNode("", true),
        createVNode(OnSeatNotification),
        createVNode(UserListContent, {
          filterFn: (_b2 = activeCategory.value) == null ? void 0 : _b2.filterFn,
          sortFn: props.sortFn
        }, createSlots({ _: 2 }, [
          _ctx.$slots.userItem ? {
            name: "userItem",
            fn: withCtx(({ userInfo }) => [
              renderSlot(_ctx.$slots, "userItem", { userInfo }, void 0, true)
            ]),
            key: "0"
          } : void 0
        ]), 1032, ["filterFn", "sortFn"]),
        createVNode(unref(index), {
          activeCategoryKey: activeCategoryKey.value,
          userCategoryNumber: ((_c = filterUserListObj.value) == null ? void 0 : _c[activeCategoryKey.value].length) || 0
        }, null, 8, ["activeCategoryKey", "userCategoryNumber"])
      ]);
    };
  }
});
export {
  _sfc_main as default
};