tuikit-atomicx-vue3 0.1.1 → 3.3.0-beta.3

package/dist/components/ContactList/ContactInfo/SearchGroupInfo/SearchGroupInfo.js

@@ -0,0 +1,141 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, unref, normalizeClass, withDirectives, vModelText, withCtx, createTextVNode } from "vue";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../../../Avatar/Avatar.js";
+import { TEXTAREA_LENGTH_LIMIT } from "../../constants/const.js";
+import { useContactListState } from "../../../../states/ContactListState/ContactListState.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "contact-search-group-info" };
+const _hoisted_2 = { class: "contact-search-group-info__header" };
+const _hoisted_3 = { class: "contact-search-group-info__main-info" };
+const _hoisted_4 = { class: "contact-search-group-info__name" };
+const _hoisted_5 = { class: "contact-search-group-info__id" };
+const _hoisted_6 = { class: "contact-search-group-info__intro" };
+const _hoisted_7 = { class: "contact-search-group-info__intro" };
+const _hoisted_8 = {
+  key: 1,
+  class: "contact-search-group-info__form"
+};
+const _hoisted_9 = { class: "contact-search-group-info__form-label" };
+const _hoisted_10 = { class: "contact-search-group-info__form-input-wrapper" };
+const _hoisted_11 = ["placeholder", "maxlength"];
+const _hoisted_12 = { class: "contact-search-group-info__form-counter" };
+const _hoisted_13 = {
+  key: 2,
+  class: "contact-search-group-info__actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchGroupInfo",
+  props: {
+    group: {},
+    onJoinGroup: {},
+    showActions: { type: Boolean, default: true },
+    onClose: {}
+  },
+  emits: ["joinGroup"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { joinGroup } = useContactListState();
+    const note = ref("");
+    const loading = ref(false);
+    const status = ref("idle");
+    const errorMessage = ref("");
+    const displayName = computed(() => props.group.name || props.group.groupID);
+    const statusClasses = computed(() => [
+      "contact-search-group-info__status",
+      `contact-search-group-info__status--${status.value}`
+    ]);
+    const getGroupTypeName = (type) => {
+      switch (type) {
+        case TUIChatEngine.TYPES.GRP_WORK:
+          return t("TUIContact.Work group");
+        case TUIChatEngine.TYPES.GRP_PUBLIC:
+          return t("TUIContact.Public group");
+        case TUIChatEngine.TYPES.GRP_MEETING:
+          return t("TUIContact.Meeting group");
+        case TUIChatEngine.TYPES.GRP_AVCHATROOM:
+          return t("TUIContact.Live group");
+        case TUIChatEngine.TYPES.GRP_COMMUNITY:
+          return t("TUIContact.Community");
+        default:
+          return t("TUIContact.Unknown");
+      }
+    };
+    const handleJoinGroup = async () => {
+      if (loading.value) {
+        return;
+      }
+      loading.value = true;
+      status.value = "idle";
+      errorMessage.value = "";
+      const applyMessage = note.value.trim();
+      emit("joinGroup", props.group, applyMessage);
+      try {
+        await joinGroup({
+          groupID: props.group.groupID,
+          applyMessage
+        });
+        status.value = "success";
+      } catch (error) {
+        status.value = "error";
+        errorMessage.value = (error == null ? void 0 : error.message) || t("TUIContact.Apply to join group failed");
+      } finally {
+        loading.value = false;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, toDisplayString(displayName.value), 1),
+            createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("TUIContact.Group ID")) + "：" + toDisplayString(_ctx.group.groupID), 1),
+            createElementVNode("div", _hoisted_6, toDisplayString(unref(t)("TUIContact.Group type")) + "：" + toDisplayString(getGroupTypeName(_ctx.group.type)), 1),
+            createElementVNode("div", _hoisted_7, toDisplayString(unref(t)("TUIContact.Group introduction")) + "：" + toDisplayString(_ctx.group.introduction || unref(t)("TUIContact.No introduction")), 1)
+          ]),
+          createVNode(unref(Avatar), {
+            src: _ctx.group.avatar,
+            alt: displayName.value,
+            size: "xl"
+          }, null, 8, ["src", "alt"])
+        ]),
+        status.value !== "idle" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(statusClasses.value)
+        }, toDisplayString(status.value === "success" ? unref(t)("TUIContact.Group application sent, waiting for admin approval") : errorMessage.value), 3)) : (openBlock(), createElementBlock("div", _hoisted_8, [
+          createElementVNode("label", _hoisted_9, toDisplayString(unref(t)("TUIContact.Application info")), 1),
+          createElementVNode("div", _hoisted_10, [
+            withDirectives(createElementVNode("textarea", {
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => note.value = $event),
+              class: "contact-search-group-info__form-input",
+              name: "joinGroupNote",
+              placeholder: unref(t)("TUIContact.Please enter application info..."),
+              maxlength: unref(TEXTAREA_LENGTH_LIMIT)
+            }, null, 8, _hoisted_11), [
+              [vModelText, note.value]
+            ]),
+            createElementVNode("div", _hoisted_12, toDisplayString(note.value.length) + "/" + toDisplayString(unref(TEXTAREA_LENGTH_LIMIT)), 1)
+          ])
+        ])),
+        _ctx.showActions && status.value !== "success" ? (openBlock(), createElementBlock("div", _hoisted_13, [
+          createVNode(unref(TUIButton), {
+            type: "primary",
+            size: "big",
+            loading: loading.value,
+            onClick: handleJoinGroup
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.Apply to join group")), 1)
+            ]),
+            _: 1
+          }, 8, ["loading"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const SearchGroupInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-2b2eb5ec"]]);
+export {
+  SearchGroupInfo as default
+};

package/dist/components/ContactList/ContactInfo/SearchGroupInfo/SearchGroupInfo.vue.d.ts

@@ -0,0 +1,32 @@
+import { SearchGroupInfoProps } from '../../../../types/contact';
+import { GroupModel } from '../../../../types/engine';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SearchGroupInfoProps>, {
+    showActions: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    joinGroup: (group: GroupModel, note: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SearchGroupInfoProps>, {
+    showActions: boolean;
+}>>> & Readonly<{
+    onJoinGroup?: ((group: GroupModel, note: string) => any) | undefined;
+}>, {
+    showActions: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/ContactList/ContactInfo/SearchGroupInfo/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchGroupInfo } from './SearchGroupInfo.vue';

package/dist/components/ContactList/ContactInfo/SearchGroupInfo/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./SearchGroupInfo.js";
+export {
+  default2 as SearchGroupInfo
+};

package/dist/components/ContactList/ContactInfo/SearchUserInfo/SearchUserInfo.js

@@ -0,0 +1,122 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, unref, normalizeClass, withDirectives, vModelText, withCtx, createTextVNode } from "vue";
+import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../../../Avatar/Avatar.js";
+import { TEXTAREA_LENGTH_LIMIT } from "../../constants/const.js";
+import { useContactListState } from "../../../../states/ContactListState/ContactListState.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "contact-search-user-info" };
+const _hoisted_2 = { class: "contact-search-user-info__header" };
+const _hoisted_3 = { class: "contact-search-user-info__main-info" };
+const _hoisted_4 = { class: "contact-search-user-info__name" };
+const _hoisted_5 = { class: "contact-search-user-info__id" };
+const _hoisted_6 = { class: "contact-search-user-info__intro" };
+const _hoisted_7 = {
+  key: 1,
+  class: "contact-search-user-info__form"
+};
+const _hoisted_8 = { class: "contact-search-user-info__form-label" };
+const _hoisted_9 = { class: "contact-search-user-info__form-input-wrapper" };
+const _hoisted_10 = ["placeholder", "maxlength"];
+const _hoisted_11 = { class: "contact-search-user-info__form-counter" };
+const _hoisted_12 = {
+  key: 2,
+  class: "contact-search-user-info__actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchUserInfo",
+  props: {
+    user: {},
+    onAddFriend: {},
+    showActions: { type: Boolean, default: true },
+    onClose: {}
+  },
+  emits: ["addFriend", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { addFriend } = useContactListState();
+    const wording = ref("");
+    const loading = ref(false);
+    const status = ref("idle");
+    const errorMessage = ref("");
+    const displayName = computed(() => props.user.nick || props.user.userID);
+    const handleAddFriend = async () => {
+      if (loading.value) {
+        return;
+      }
+      loading.value = true;
+      status.value = "idle";
+      errorMessage.value = "";
+      const addWording = wording.value.trim();
+      emit("addFriend", props.user, addWording);
+      try {
+        await addFriend({
+          userID: props.user.userID,
+          addSource: "AddSource_Type_Web",
+          wording: addWording
+        });
+        status.value = "success";
+      } catch (error) {
+        status.value = "error";
+        errorMessage.value = (error == null ? void 0 : error.message) || t("TUIContact.Add friend failed");
+      } finally {
+        loading.value = false;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("div", _hoisted_4, toDisplayString(displayName.value), 1),
+            createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("TUIContact.ID")) + "：" + toDisplayString(_ctx.user.userID), 1),
+            createElementVNode("div", _hoisted_6, toDisplayString(unref(t)("TUIContact.Personal signature")) + "：" + toDisplayString(_ctx.user.selfSignature || ""), 1)
+          ]),
+          createVNode(unref(Avatar), {
+            src: _ctx.user.avatar,
+            alt: displayName.value,
+            size: "xl"
+          }, null, 8, ["src", "alt"])
+        ]),
+        status.value !== "idle" ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass([
+            "contact-search-user-info__status",
+            `contact-search-user-info__status--${status.value}`
+          ])
+        }, toDisplayString(status.value === "success" ? unref(t)("TUIContact.Friend request sent, waiting for confirmation") : errorMessage.value), 3)) : (openBlock(), createElementBlock("div", _hoisted_7, [
+          createElementVNode("label", _hoisted_8, toDisplayString(unref(t)("TUIContact.Application info")), 1),
+          createElementVNode("div", _hoisted_9, [
+            withDirectives(createElementVNode("textarea", {
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => wording.value = $event),
+              class: "contact-search-user-info__form-input",
+              name: "addFriendWording",
+              placeholder: unref(t)("TUIContact.Please enter application info..."),
+              maxlength: unref(TEXTAREA_LENGTH_LIMIT)
+            }, null, 8, _hoisted_10), [
+              [vModelText, wording.value]
+            ]),
+            createElementVNode("div", _hoisted_11, toDisplayString(wording.value.length) + "/" + toDisplayString(unref(TEXTAREA_LENGTH_LIMIT)), 1)
+          ])
+        ])),
+        _ctx.showActions && status.value !== "success" ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          createVNode(unref(TUIButton), {
+            type: "primary",
+            size: "big",
+            loading: loading.value,
+            onClick: handleAddFriend
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.Apply to add friend")), 1)
+            ]),
+            _: 1
+          }, 8, ["loading"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const SearchUserInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-59ef3830"]]);
+export {
+  SearchUserInfo as default
+};

package/dist/components/ContactList/ContactInfo/SearchUserInfo/SearchUserInfo.vue.d.ts

@@ -0,0 +1,33 @@
+import { SearchUserInfoProps, UserProfile } from '../../../../types/contact';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SearchUserInfoProps>, {
+    showActions: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+    addFriend: (user: UserProfile, wording: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SearchUserInfoProps>, {
+    showActions: boolean;
+}>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onAddFriend?: ((user: UserProfile, wording: string) => any) | undefined;
+}>, {
+    showActions: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/ContactList/ContactInfo/SearchUserInfo/index.d.ts

@@ -0,0 +1 @@
+export { default as SearchUserInfo } from './SearchUserInfo.vue';

package/dist/components/ContactList/ContactInfo/SearchUserInfo/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./SearchUserInfo.js";
+export {
+  default2 as SearchUserInfo
+};

package/dist/components/ContactList/ContactInfo/index.d.ts

@@ -0,0 +1,8 @@
+export { default as ContactInfo } from './ContactInfo.vue';
+export * from './FriendInfo';
+export * from './GroupInfo';
+export * from './BlacklistInfo';
+export * from './FriendApplicationInfo';
+export * from './GroupApplicationInfo';
+export * from './SearchUserInfo';
+export * from './SearchGroupInfo';

package/dist/components/ContactList/ContactInfo/index.js

@@ -0,0 +1,18 @@
+import { default as default2 } from "./ContactInfo.js";
+import { default as default3 } from "./FriendInfo/FriendInfo.js";
+import { default as default4 } from "./GroupInfo/GroupInfo.js";
+import { default as default5 } from "./BlacklistInfo/BlacklistInfo.js";
+import { default as default6 } from "./FriendApplicationInfo/FriendApplicationInfo.js";
+import { default as default7 } from "./GroupApplicationInfo/GroupApplicationInfo.js";
+import { default as default8 } from "./SearchUserInfo/SearchUserInfo.js";
+import { default as default9 } from "./SearchGroupInfo/SearchGroupInfo.js";
+export {
+  default5 as BlacklistInfo,
+  default2 as ContactInfo,
+  default6 as FriendApplicationInfo,
+  default3 as FriendInfo,
+  default7 as GroupApplicationInfo,
+  default4 as GroupInfo,
+  default9 as SearchGroupInfo,
+  default8 as SearchUserInfo
+};

package/dist/components/ContactList/ContactList.js

@@ -0,0 +1,281 @@
+import { defineComponent, computed, watch, ref, createElementBlock, openBlock, createElementVNode, createBlock, createCommentVNode, unref, Fragment, renderList, resolveDynamicComponent, withKeys, createVNode, normalizeClass, toDisplayString } from "vue";
+import { useUIKit, IconArrowStrokeSelectDown } from "@tencentcloud/uikit-base-component-vue3";
+import { ContactItemType } from "../../types/contact.js";
+import { UNREAD_COUNT_LIMIT } from "./constants/const.js";
+import { useContactListState } from "../../states/ContactListState/ContactListState.js";
+import ContactSearch from "./ContactSearch/ContactSearch.js";
+import { ContactListItem as _sfc_main$1 } from "./ContactListItem/index.js";
+import { useContactList } from "./hooks/useContactList.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "contact-list" };
+const _hoisted_2 = { class: "contact-list__container" };
+const _hoisted_3 = { class: "contact-list__main" };
+const _hoisted_4 = { class: "contact-list__content" };
+const _hoisted_5 = ["onClick", "onKeydown"];
+const _hoisted_6 = { class: "contact-list__group-title" };
+const _hoisted_7 = { class: "contact-list__group-name" };
+const _hoisted_8 = {
+  key: 0,
+  class: "contact-list__unread-badge"
+};
+const _hoisted_9 = {
+  key: 2,
+  class: "contact-list__group-content"
+};
+const _hoisted_10 = {
+  key: 1,
+  class: "contact-list__empty"
+};
+const _hoisted_11 = { class: "contact-list__empty-text" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ContactList",
+  props: {
+    activeContactItem: {},
+    enableSearch: { type: Boolean, default: true },
+    groupConfig: {},
+    searchPlaceholder: { default: void 0 },
+    emptyText: { default: void 0 },
+    ContactItem: {},
+    ContactSearchComponent: {},
+    GroupHeader: {},
+    PlaceholderEmptyList: {},
+    onContactItemClick: {},
+    onFriendApplicationAction: {},
+    onGroupApplicationAction: {}
+  },
+  emits: ["contact-item-click", "friend-application-action", "group-application-action"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const {
+      friendList,
+      groupList,
+      blackList,
+      friendApplicationList,
+      groupApplicationList,
+      friendApplicationUnreadCount,
+      acceptFriendApplication,
+      refuseFriendApplication,
+      acceptGroupApplication,
+      refuseGroupApplication,
+      markFriendApplicationAsRead
+    } = useContactListState();
+    const { activeContact, setActiveContact, setContactGroupTitles } = useContactList();
+    const defaultGroupTitles = computed(() => {
+      const groupTitle = {
+        [ContactItemType.FRIEND_REQUEST]: t("TUIContact.New contacts"),
+        [ContactItemType.GROUP_REQUEST]: t("TUIContact.Group applications"),
+        [ContactItemType.FRIEND]: t("TUIContact.My friends"),
+        [ContactItemType.GROUP]: t("TUIContact.My groups"),
+        [ContactItemType.BLACK]: t("TUIContact.Blacklist")
+      };
+      setContactGroupTitles(groupTitle);
+      return groupTitle;
+    });
+    watch(
+      () => props.activeContactItem,
+      (newVal) => {
+        if (newVal) {
+          setActiveContact(newVal);
+        }
+      },
+      { immediate: true }
+    );
+    const expandedGroups = ref(/* @__PURE__ */ new Set());
+    const toggleGroupExpanded = (groupKey) => {
+      const newExpanded = new Set(expandedGroups.value);
+      if (newExpanded.has(groupKey)) {
+        newExpanded.delete(groupKey);
+      } else {
+        newExpanded.add(groupKey);
+      }
+      if (groupKey === ContactItemType.FRIEND_REQUEST && friendApplicationUnreadCount.value > 0) {
+        markFriendApplicationAsRead();
+      }
+      expandedGroups.value = newExpanded;
+    };
+    const getItemId = (item) => {
+      if ("userID" in item) {
+        return item.userID;
+      }
+      if ("groupID" in item) {
+        return item.groupID;
+      }
+      return "";
+    };
+    const handleContactClick = (type, item) => {
+      const contactGroupItem = { type, data: item };
+      emit("contact-item-click", contactGroupItem);
+      setActiveContact(contactGroupItem);
+    };
+    const handleFriendApplicationAction = async (action, application) => {
+      try {
+        if (action === "accept") {
+          await acceptFriendApplication({
+            userID: application.userID,
+            type: application.type
+          });
+        } else {
+          await refuseFriendApplication(application.userID);
+        }
+        emit("friend-application-action", action, application);
+      } catch (error) {
+        console.error(`[ContactList handleFriendApplicationAction] Failed to ${action} friend application:`, error);
+      }
+    };
+    const handleGroupApplicationAction = async (action, application) => {
+      try {
+        const params = {
+          handleMessage: "",
+          application
+        };
+        if (action === "accept") {
+          await acceptGroupApplication(params);
+        } else {
+          await refuseGroupApplication(params);
+        }
+        emit("group-application-action", action, application);
+      } catch (error) {
+        console.error(`[ContactList handleGroupApplicationAction] Failed to ${action} group application:`, error);
+      }
+    };
+    watch(
+      () => props.groupConfig,
+      (newConfig) => {
+        if (newConfig) {
+          const newGroupTitles = defaultGroupTitles.value;
+          Object.keys(defaultGroupTitles).forEach((key) => {
+            var _a;
+            newGroupTitles[key] = ((_a = newConfig[key]) == null ? void 0 : _a.title) || defaultGroupTitles.value[key] || "";
+          });
+          setContactGroupTitles(newGroupTitles);
+        }
+      }
+    );
+    const contactGroups = computed(() => {
+      const groupConfigs = [
+        {
+          type: ContactItemType.FRIEND_REQUEST,
+          title: defaultGroupTitles.value[ContactItemType.FRIEND_REQUEST],
+          items: friendApplicationList.value,
+          unreadCount: friendApplicationUnreadCount.value,
+          order: 1
+        },
+        {
+          type: ContactItemType.GROUP_REQUEST,
+          title: defaultGroupTitles.value[ContactItemType.GROUP_REQUEST],
+          items: groupApplicationList.value,
+          order: 2
+        },
+        {
+          type: ContactItemType.FRIEND,
+          title: defaultGroupTitles.value[ContactItemType.FRIEND],
+          items: friendList.value,
+          order: 3
+        },
+        {
+          type: ContactItemType.GROUP,
+          title: defaultGroupTitles.value[ContactItemType.GROUP],
+          items: groupList.value,
+          order: 4
+        },
+        {
+          type: ContactItemType.BLACK,
+          title: defaultGroupTitles.value[ContactItemType.BLACK],
+          items: blackList.value,
+          order: 5
+        }
+      ];
+      const customGroupConfig = props.groupConfig;
+      const groups = groupConfigs.filter((config) => {
+        var _a;
+        return !((_a = customGroupConfig == null ? void 0 : customGroupConfig[config.type]) == null ? void 0 : _a.hidden);
+      }).map((config) => {
+        var _a, _b;
+        return {
+          key: config.type,
+          type: config.type,
+          title: ((_a = customGroupConfig == null ? void 0 : customGroupConfig[config.type]) == null ? void 0 : _a.title) ?? config.title ?? "",
+          items: config.items,
+          ...config.unreadCount !== void 0 && { unreadCount: config.unreadCount },
+          isExpanded: expandedGroups.value.has(config.type),
+          order: ((_b = customGroupConfig == null ? void 0 : customGroupConfig[config.type]) == null ? void 0 : _b.order) ?? config.order
+        };
+      }).sort((a, b) => a.order - b.order);
+      return groups;
+    });
+    const searchPlaceholder = computed(() => props.searchPlaceholder || t("TUIContact.Search contacts"));
+    const emptyText = computed(() => props.emptyText || t("TUIContact.No contacts"));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            _ctx.enableSearch ? (openBlock(), createBlock(unref(ContactSearch), {
+              key: 0,
+              placeholder: searchPlaceholder.value,
+              onResultClick: _cache[0] || (_cache[0] = (item) => {
+                handleContactClick(item.type, item.data);
+              })
+            }, null, 8, ["placeholder"])) : createCommentVNode("", true),
+            createElementVNode("div", _hoisted_4, [
+              contactGroups.value.length > 0 ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(contactGroups.value, (group) => {
+                return openBlock(), createElementBlock("div", {
+                  key: group.key,
+                  class: "contact-list__group"
+                }, [
+                  _ctx.GroupHeader ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.GroupHeader), {
+                    key: 0,
+                    data: group,
+                    onClick: ($event) => toggleGroupExpanded(group.key)
+                  }, null, 8, ["data", "onClick"])) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: "contact-list__group-header",
+                    role: "button",
+                    tabindex: "0",
+                    onClick: ($event) => toggleGroupExpanded(group.key),
+                    onKeydown: [
+                      withKeys(($event) => toggleGroupExpanded(group.key), ["enter"]),
+                      withKeys(($event) => toggleGroupExpanded(group.key), ["space"])
+                    ]
+                  }, [
+                    createElementVNode("div", _hoisted_6, [
+                      createVNode(unref(IconArrowStrokeSelectDown), {
+                        class: normalizeClass([
+                          "contact-list__group-icon",
+                          group.isExpanded && "contact-list__group-icon--expanded"
+                        ])
+                      }, null, 8, ["class"]),
+                      createElementVNode("span", _hoisted_7, toDisplayString(group.title), 1),
+                      group.unreadCount !== void 0 && group.unreadCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(group.unreadCount > unref(UNREAD_COUNT_LIMIT) ? "99+" : group.unreadCount), 1)) : createCommentVNode("", true)
+                    ])
+                  ], 40, _hoisted_5)),
+                  group.isExpanded ? (openBlock(), createElementBlock("div", _hoisted_9, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(group.items, (contactItem, index) => {
+                      return openBlock(), createBlock(resolveDynamicComponent(unref(_sfc_main$1)), {
+                        key: `${group.type}_${getItemId(contactItem)}_${index}`,
+                        "contact-item": { type: group.type, data: contactItem },
+                        "active-contact-item": unref(activeContact),
+                        onClick: handleContactClick,
+                        onFriendApplicationAction: handleFriendApplicationAction,
+                        onGroupApplicationAction: handleGroupApplicationAction
+                      }, null, 40, ["contact-item", "active-contact-item"]);
+                    }), 128))
+                  ])) : createCommentVNode("", true)
+                ]);
+              }), 128)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                _ctx.PlaceholderEmptyList ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.PlaceholderEmptyList), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_10, [
+                  createElementVNode("div", _hoisted_11, toDisplayString(emptyText.value), 1)
+                ]))
+              ], 64))
+            ])
+          ])
+        ])
+      ]);
+    };
+  }
+});
+const ContactListComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-67413a61"]]);
+export {
+  ContactListComponent as default
+};