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

package/dist/components/ChatSetting/C2CChatSetting/C2CChatSetting.js

@@ -0,0 +1,123 @@
+import { defineComponent, createElementBlock, createCommentVNode, unref, openBlock, createElementVNode, createVNode, createBlock, toDisplayString } from "vue";
+import { useUIKit, IconCopy, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../../Avatar/Avatar.js";
+import SettingItem from "../SettingItem/SettingItem.js";
+import { useC2CSettingState } from "../../../states/C2CSettingState/C2CSettingState.js";
+import { copyTextToClipboard } from "../../../utils/copyText.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "c2c-chat-setting"
+};
+const _hoisted_2 = { class: "c2c-chat-setting__info-section" };
+const _hoisted_3 = { class: "c2c-chat-setting__avatar-section" };
+const _hoisted_4 = { class: "c2c-chat-setting__item" };
+const _hoisted_5 = { class: "c2c-chat-setting__label" };
+const _hoisted_6 = { class: "c2c-chat-setting__content" };
+const _hoisted_7 = { class: "c2c-chat-setting__value" };
+const _hoisted_8 = { class: "c2c-chat-setting__remark-section" };
+const _hoisted_9 = { class: "c2c-chat-setting__settings-section" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "C2CChatSetting",
+  setup(__props) {
+    const { t } = useUIKit();
+    const {
+      userID,
+      nick,
+      avatar,
+      signature,
+      remark,
+      isMuted,
+      isPinned,
+      setChatPinned,
+      setChatMuted,
+      setUserRemark
+    } = useC2CSettingState();
+    function handlePinnedChange(value) {
+      setChatPinned(value);
+    }
+    function handleMutedChange(value) {
+      setChatMuted(value);
+    }
+    function handleRemarkConfirm(value) {
+      setUserRemark(value);
+      TUIToast.success({
+        message: t("ChatSetting.remark_update_success")
+      });
+    }
+    function handleCopyUserID() {
+      if (userID.value) {
+        copyTextToClipboard(userID.value).then(() => {
+          TUIToast.success({
+            message: t("ChatSetting.copied")
+          });
+        });
+      }
+    }
+    return (_ctx, _cache) => {
+      return unref(userID) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createVNode(unref(Avatar), {
+              src: unref(avatar) || "",
+              size: "xxl",
+              class: "c2c-chat-setting__avatar"
+            }, null, 8, ["src"])
+          ]),
+          createElementVNode("div", _hoisted_4, [
+            createElementVNode("div", _hoisted_5, toDisplayString(unref(t)("ChatSetting.user_id")), 1),
+            createElementVNode("div", _hoisted_6, [
+              createElementVNode("div", _hoisted_7, toDisplayString(unref(userID)), 1),
+              createVNode(unref(IconCopy), {
+                class: "c2c-chat-setting__copy-btn",
+                onClick: handleCopyUserID
+              })
+            ])
+          ]),
+          createVNode(unref(SettingItem), {
+            type: "display",
+            label: unref(t)("ChatSetting.nickname"),
+            value: unref(nick) || "",
+            placeholder: unref(t)("ChatSetting.nickname_placeholder")
+          }, null, 8, ["label", "value", "placeholder"]),
+          unref(signature) && unref(signature).trim() ? (openBlock(), createBlock(unref(SettingItem), {
+            key: 0,
+            type: "display",
+            label: unref(t)("ChatSetting.signature"),
+            value: unref(signature)
+          }, null, 8, ["label", "value"])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_8, [
+          createVNode(unref(SettingItem), {
+            type: "input",
+            label: unref(t)("ChatSetting.remark"),
+            value: unref(remark) ?? "",
+            placeholder: unref(t)("ChatSetting.remark_placeholder"),
+            editable: true,
+            onConfirm: handleRemarkConfirm
+          }, null, 8, ["label", "value", "placeholder"])
+        ]),
+        createElementVNode("div", _hoisted_9, [
+          unref(isPinned) !== void 0 ? (openBlock(), createBlock(unref(SettingItem), {
+            key: 0,
+            type: "switch",
+            label: unref(t)("ChatSetting.pin_conversation"),
+            value: unref(isPinned),
+            onChange: handlePinnedChange
+          }, null, 8, ["label", "value"])) : createCommentVNode("", true),
+          unref(isMuted) !== void 0 ? (openBlock(), createBlock(unref(SettingItem), {
+            key: 1,
+            type: "switch",
+            label: unref(t)("ChatSetting.mute_conversation"),
+            value: unref(isMuted),
+            onChange: handleMutedChange
+          }, null, 8, ["label", "value"])) : createCommentVNode("", true)
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const C2CChatSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ed998a3a"]]);
+export {
+  C2CChatSetting as default
+};

package/dist/components/ChatSetting/C2CChatSetting/C2CChatSetting.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ChatSetting/C2CChatSetting/index.d.ts

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

package/dist/components/ChatSetting/C2CChatSetting/index.js

@@ -0,0 +1,5 @@
+import C2CChatSetting from "./C2CChatSetting.js";
+export {
+  C2CChatSetting,
+  C2CChatSetting as default
+};

package/dist/components/ChatSetting/ChatSetting.js

@@ -0,0 +1,30 @@
+import { defineComponent, computed, createElementBlock, unref, openBlock, createBlock, createCommentVNode } from "vue";
+import { TUIChatEngine } from "@tencentcloud/chat-uikit-engine";
+import C2CChatSetting from "./C2CChatSetting/C2CChatSetting.js";
+import GroupChatSetting from "./GroupChatSetting/GroupChatSetting.js";
+import { useConversationListState } from "../../states/ConversationListState/ConversationListState.js";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  key: 0,
+  class: "chat-setting"
+};
+const _hoisted_2 = { key: 1 };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ChatSetting",
+  setup(__props) {
+    const { activeConversation } = useConversationListState();
+    const chatType = computed(() => {
+      var _a;
+      return (_a = activeConversation.value) == null ? void 0 : _a.type;
+    });
+    return (_ctx, _cache) => {
+      return Boolean(unref(activeConversation)) ? (openBlock(), createElementBlock("div", _hoisted_1, [
+        chatType.value === unref(TUIChatEngine).TYPES.CONV_C2C ? (openBlock(), createBlock(unref(C2CChatSetting), { key: 0 })) : chatType.value === unref(TUIChatEngine).TYPES.CONV_GROUP ? (openBlock(), createBlock(unref(GroupChatSetting), { key: 1 })) : createCommentVNode("", true)
+      ])) : (openBlock(), createElementBlock("div", _hoisted_2, "没渲染"));
+    };
+  }
+});
+const ChatSettingComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4b04ef29"]]);
+export {
+  ChatSettingComponent as default
+};

package/dist/components/ChatSetting/ChatSetting.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.js

@@ -0,0 +1,182 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, createBlock, createCommentVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, createElementVNode } from "vue";
+import { useUIKit, TUIButton, TUIDialog, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import "../../../UserPicker/index.js";
+import { useGroupSettingState } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { GroupPermission } from "../../../../states/GroupSettingState/types.js";
+import UserPicker from "../../../UserPicker/UserPicker.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = {
+  class: /* @__PURE__ */ normalizeClass([
+    "group-actions"
+  ])
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupActions",
+  setup(__props) {
+    const { t } = useUIKit();
+    const {
+      allMembers,
+      currentUserID,
+      dismissGroup,
+      quitGroup,
+      hasPermission,
+      changeGroupOwner
+    } = useGroupSettingState();
+    const isShowTransferDialog = ref(false);
+    const isShowDismissDialog = ref(false);
+    const isShowQuitDialog = ref(false);
+    const loading = ref(false);
+    const userPickerRef = ref();
+    const canDismissGroup = computed(() => hasPermission(GroupPermission.DISMISS_GROUP));
+    const canQuitGroup = computed(() => hasPermission(GroupPermission.QUIT_GROUP));
+    const canChangeGroupOwner = computed(() => hasPermission(GroupPermission.TRANSFER_OWNERSHIP));
+    const handleChangeGroupOwner = () => {
+      isShowTransferDialog.value = true;
+    };
+    const handleTransferConfirm = async () => {
+      var _a;
+      const selectedItems = (_a = userPickerRef.value) == null ? void 0 : _a.getSelectedItems();
+      if (!selectedItems || selectedItems.length === 0) {
+        TUIToast.error({
+          message: t("ChatSetting.select_new_owner_error")
+        });
+        return;
+      }
+      if (selectedItems.length > 1) {
+        TUIToast.error({
+          message: t("ChatSetting.only_one_owner_error")
+        });
+        return;
+      }
+      const newOwnerID = selectedItems[0].key;
+      try {
+        loading.value = true;
+        await changeGroupOwner({ newOwnerID });
+        TUIToast.success({
+          message: t("ChatSetting.transfer_owner_success")
+        });
+        isShowTransferDialog.value = false;
+      } catch {
+        TUIToast.error({
+          message: t("ChatSetting.transfer_owner_failed")
+        });
+      } finally {
+        loading.value = false;
+      }
+    };
+    const transferDataSource = computed(() => {
+      if (!allMembers.value) {
+        return [];
+      }
+      return allMembers.value.map((member) => {
+        let label = member.nick || member.userID;
+        if (label.length > 20) {
+          label = `${label.slice(0, 20)}...`;
+        }
+        label = `${label} (${t(`ChatSetting.group_member_role_${member.role.toLowerCase()}`)})`;
+        if (member.userID === currentUserID.value) {
+          label = `${label} (${t("ChatSetting.me")})`;
+        }
+        return {
+          key: member.userID,
+          label,
+          avatarUrl: member.avatar
+        };
+      });
+    });
+    const handleQuitGroup = () => {
+      quitGroup();
+    };
+    const handleDismissGroup = () => {
+      dismissGroup();
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        canChangeGroupOwner.value ? (openBlock(), createBlock(unref(TUIButton), {
+          key: 0,
+          class: "group-actions__button",
+          radius: "rect",
+          disabled: loading.value,
+          onClick: handleChangeGroupOwner
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t)("ChatSetting.transfer_group_owner")), 1)
+          ]),
+          _: 1
+        }, 8, ["disabled"])) : createCommentVNode("", true),
+        canQuitGroup.value ? (openBlock(), createBlock(unref(TUIButton), {
+          key: 1,
+          class: "group-actions__button",
+          color: "red",
+          radius: "rect",
+          onClick: _cache[0] || (_cache[0] = () => isShowQuitDialog.value = true)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t)("ChatSetting.quit_group")), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        canDismissGroup.value ? (openBlock(), createBlock(unref(TUIButton), {
+          key: 2,
+          class: "group-actions__button",
+          color: "red",
+          radius: "rect",
+          onClick: _cache[1] || (_cache[1] = () => isShowDismissDialog.value = true)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(unref(t)("ChatSetting.dismiss_group")), 1)
+          ]),
+          _: 1
+        })) : createCommentVNode("", true),
+        createVNode(unref(TUIDialog), {
+          visible: isShowTransferDialog.value,
+          title: unref(t)("ChatSetting.transfer_group_owner"),
+          "custom-classes": ["user-picker-dialog"],
+          onClose: _cache[3] || (_cache[3] = () => isShowTransferDialog.value = false),
+          onCancel: _cache[4] || (_cache[4] = () => isShowTransferDialog.value = false),
+          onConfirm: handleTransferConfirm
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(UserPicker), {
+              ref_key: "userPickerRef",
+              ref: userPickerRef,
+              "display-mode": "list",
+              "data-source": transferDataSource.value,
+              "locked-items": [{ key: unref(currentUserID) }],
+              "max-count": 1,
+              onMaxCountExceed: _cache[2] || (_cache[2] = () => {
+                unref(TUIToast).error({
+                  message: unref(t)("ChatSetting.only_one_owner_error")
+                });
+              })
+            }, null, 8, ["data-source", "locked-items"])
+          ]),
+          _: 1
+        }, 8, ["visible", "title"]),
+        createVNode(unref(TUIDialog), {
+          visible: isShowDismissDialog.value,
+          title: unref(t)("ChatSetting.dismiss_group"),
+          onClose: _cache[5] || (_cache[5] = () => isShowDismissDialog.value = false),
+          onCancel: _cache[6] || (_cache[6] = () => isShowDismissDialog.value = false),
+          onConfirm: handleDismissGroup
+        }, null, 8, ["visible", "title"]),
+        createVNode(unref(TUIDialog), {
+          visible: isShowQuitDialog.value,
+          title: unref(t)("ChatSetting.quit_group"),
+          onClose: _cache[7] || (_cache[7] = () => isShowQuitDialog.value = false),
+          onCancel: _cache[8] || (_cache[8] = () => isShowQuitDialog.value = false),
+          onConfirm: handleQuitGroup
+        }, {
+          default: withCtx(() => [
+            createElementVNode("div", null, toDisplayString(unref(t)("ChatSetting.confirm_quit_group")), 1)
+          ]),
+          _: 1
+        }, 8, ["visible", "title"])
+      ]);
+    };
+  }
+});
+const GroupActions = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-52ab1c35"]]);
+export {
+  GroupActions as default
+};

package/dist/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/ChatSetting/GroupChatSetting/GroupActions/index.d.ts

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

package/dist/components/ChatSetting/GroupChatSetting/GroupActions/index.js

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

package/dist/components/ChatSetting/GroupChatSetting/GroupChatSetting.js

@@ -0,0 +1,262 @@
+import { defineComponent, ref, onMounted, watch, computed, createBlock, createCommentVNode, openBlock, unref, normalizeClass, withCtx, createVNode, createElementBlock, Fragment } from "vue";
+import { useUIKit, TUIDialog, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { View as _sfc_main$1 } from "../../../baseComp/View/index.js";
+import "../../UserPicker/index.js";
+import GroupActions from "./GroupActions/GroupActions.js";
+import GroupInfo from "./GroupInfo/GroupInfo.js";
+import GroupManagement from "./GroupManagement/GroupManagement.js";
+import GroupManagementEntry from "./GroupManagementEntry/GroupManagementEntry.js";
+import GroupMembers from "./GroupMembers/GroupMembers.js";
+import PersonalSettings from "./PersonalSettings/PersonalSettings.js";
+import { useGroupSettingState } from "../../../states/GroupSettingState/GroupSettingState.js";
+import { GroupPermission, GroupInviteType, GroupMemberRole } from "../../../states/GroupSettingState/types.js";
+import UserPicker from "../../UserPicker/UserPicker.js";
+import { useContactListState } from "../../../states/ContactListState/ContactListState.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupChatSetting",
+  setup(__props) {
+    const {
+      groupID,
+      allMembers,
+      memberCount,
+      isInGroup,
+      currentUserID,
+      currentUserRole,
+      inviteOption,
+      // Business GroupActions
+      hasPermission,
+      getGroupMemberList,
+      addGroupMember,
+      deleteGroupMember
+    } = useGroupSettingState();
+    const { friendList } = useContactListState();
+    const { t } = useUIKit();
+    const prevGroupID = ref("");
+    const loading = ref(false);
+    const hasMore = ref(true);
+    const currentView = ref(
+      "main"
+      /* MAIN */
+    );
+    const isShowUserPickerDialog = ref(false);
+    const memberDataSource = ref([]);
+    const userPickerLockedItems = ref([]);
+    const memberActionType = ref(null);
+    const userPickerRef = ref();
+    onMounted(() => {
+      if (groupID.value && prevGroupID.value !== groupID.value) {
+        setHasMore(true);
+        loading.value = false;
+        currentView.value = "main";
+        prevGroupID.value = groupID.value;
+        setTimeout(() => {
+          getGroupMemberList({ offset: 0, count: 100 });
+        }, 1e3);
+      }
+    });
+    watch(groupID, (newGroupID) => {
+      if (newGroupID && prevGroupID.value !== newGroupID) {
+        setHasMore(true);
+        loading.value = false;
+        currentView.value = "main";
+        prevGroupID.value = newGroupID;
+        setTimeout(() => {
+          getGroupMemberList({ offset: 0, count: 100 });
+        }, 1e3);
+      }
+    });
+    watch([allMembers, memberCount], () => {
+      if (allMembers.value && memberCount.value !== void 0) {
+        setHasMore(allMembers.value.length < memberCount.value);
+      }
+    });
+    function setHasMore(value) {
+      hasMore.value = value;
+    }
+    const handleLoadMoreMembers = async () => {
+      var _a;
+      if (loading.value || !hasMore.value || !groupID.value) {
+        return;
+      }
+      loading.value = true;
+      try {
+        await getGroupMemberList({
+          offset: ((_a = allMembers.value) == null ? void 0 : _a.length) || 0,
+          count: 100
+          // Load 100 more members each time
+        });
+      } catch {
+        TUIToast.error({
+          message: "Failed to load more members"
+        });
+      } finally {
+        loading.value = false;
+      }
+    };
+    const onUserPickerDialogOpen = (action) => {
+      var _a, _b, _c;
+      if (!allMembers.value || !action) {
+        return;
+      }
+      if (action === "remove") {
+        memberActionType.value = "remove";
+        const dataSource = (_a = allMembers.value || []) == null ? void 0 : _a.map((member) => {
+          let label = member.nick || member.userID;
+          if (label.length > 20) {
+            label = `${label.slice(0, 20)}...`;
+          }
+          label = `${label} (${t(`ChatSetting.group_member_role_${member.role.toLowerCase()}`)})`;
+          if (member.userID === currentUserID.value) {
+            label = `${label} (${t("ChatSetting.me")})`;
+          }
+          return {
+            key: member.userID,
+            label,
+            avatarUrl: member.avatar
+          };
+        });
+        memberDataSource.value = dataSource;
+        const lockedItems = allMembers.value.filter((member) => member.userID === currentUserID.value || member.role === GroupMemberRole.OWNER || currentUserRole.value === GroupMemberRole.ADMIN && member.role === GroupMemberRole.ADMIN).map((member) => ({
+          key: member.userID,
+          label: member.nick || member.userID,
+          avatarUrl: member.avatar
+        }));
+        userPickerLockedItems.value = lockedItems;
+        isShowUserPickerDialog.value = true;
+      }
+      if (action === "add") {
+        memberActionType.value = "add";
+        const dataSource = (_b = friendList.value || []) == null ? void 0 : _b.map((friend) => {
+          let label = friend.nick || friend.userID;
+          if (label.length > 20) {
+            label = `${label.slice(0, 20)}...`;
+          }
+          return {
+            key: friend.userID,
+            label,
+            avatarUrl: friend.avatar ?? ""
+          };
+        });
+        memberDataSource.value = dataSource;
+        const lockedItems = (_c = allMembers.value) == null ? void 0 : _c.map((member) => ({
+          key: member.userID,
+          label: member.nick || member.userID,
+          avatarUrl: member.avatar
+        }));
+        userPickerLockedItems.value = lockedItems;
+        isShowUserPickerDialog.value = true;
+      }
+    };
+    const onRemoveMemberUserPickerReachEnd = () => {
+      handleLoadMoreMembers();
+    };
+    const onUserPickerConfirm = () => {
+      var _a;
+      const selectedItems = (_a = userPickerRef.value) == null ? void 0 : _a.getSelectedItems();
+      if (memberActionType.value === "remove") {
+        if (selectedItems && selectedItems.length > 0) {
+          deleteGroupMember({
+            userIDList: selectedItems.map((item) => item.key)
+          }).then(() => {
+            TUIToast.success({
+              message: t("ChatSetting.group_member_remove_success")
+            });
+          }).catch(() => {
+            TUIToast.error({
+              message: t("ChatSetting.group_member_remove_failed")
+            });
+          });
+        }
+      } else if (memberActionType.value === "add") {
+        if (selectedItems && selectedItems.length > 0) {
+          addGroupMember({
+            userIDList: selectedItems.map((item) => item.key)
+          }).then((result) => {
+            if (result.data.successUserIDList.length < selectedItems.length) {
+              TUIToast.warning({
+                message: t("ChatSetting.group_member_add_partially_failed")
+              });
+            } else {
+              TUIToast.success({
+                message: t("ChatSetting.group_member_add_success")
+              });
+            }
+          }).catch(() => {
+            TUIToast.error({
+              message: t("ChatSetting.group_member_add_failed")
+            });
+          });
+        }
+      }
+      memberActionType.value = null;
+      isShowUserPickerDialog.value = false;
+    };
+    const userPickerDialogTitle = computed(() => {
+      if (memberActionType.value === "remove") {
+        return t("ChatSetting.remove_member_dialog_title");
+      }
+      return t("ChatSetting.add_member_dialog_title");
+    });
+    return (_ctx, _cache) => {
+      return currentView.value === "group_management" ? (openBlock(), createBlock(unref(GroupManagement), {
+        key: 0,
+        onBack: _cache[0] || (_cache[0] = () => currentView.value = "main")
+      })) : unref(groupID) ? (openBlock(), createBlock(unref(_sfc_main$1), {
+        key: 1,
+        class: normalizeClass(["group-chat-setting"])
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(GroupInfo)),
+          unref(isInGroup) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            (openBlock(), createBlock(unref(GroupMembers), {
+              key: unref(groupID),
+              members: unref(allMembers),
+              "member-count": unref(memberCount) || 0,
+              "hidden-member-count": typeof unref(memberCount) === "undefined",
+              loading: loading.value,
+              "has-more": hasMore.value,
+              "show-add-button": unref(inviteOption) === unref(GroupInviteType).FREE_ACCESS || unref(inviteOption) === unref(GroupInviteType).NEED_PERMISSION,
+              "show-remove-button": unref(hasPermission)(unref(GroupPermission).REMOVE_MEMBER),
+              onReachEnd: handleLoadMoreMembers,
+              onRemoveButtonClick: _cache[1] || (_cache[1] = () => onUserPickerDialogOpen("remove")),
+              onAddButtonClick: _cache[2] || (_cache[2] = () => onUserPickerDialogOpen("add"))
+            }, null, 8, ["members", "member-count", "hidden-member-count", "loading", "has-more", "show-add-button", "show-remove-button"])),
+            createVNode(unref(GroupManagementEntry), {
+              onClick: _cache[3] || (_cache[3] = () => currentView.value = "group_management")
+            }),
+            createVNode(unref(PersonalSettings)),
+            createVNode(unref(GroupActions)),
+            createVNode(unref(TUIDialog), {
+              visible: isShowUserPickerDialog.value,
+              title: userPickerDialogTitle.value,
+              "custom-classes": ["user-picker-dialog"],
+              "confirm-text": unref(t)("ChatSetting.confirm"),
+              "cancel-text": unref(t)("ChatSetting.cancel"),
+              onClose: _cache[4] || (_cache[4] = () => isShowUserPickerDialog.value = false),
+              onCancel: _cache[5] || (_cache[5] = () => isShowUserPickerDialog.value = false),
+              onConfirm: onUserPickerConfirm
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(UserPicker), {
+                  ref_key: "userPickerRef",
+                  ref: userPickerRef,
+                  "display-mode": "list",
+                  "data-source": memberDataSource.value,
+                  "locked-items": userPickerLockedItems.value,
+                  onReachEnd: onRemoveMemberUserPickerReachEnd
+                }, null, 8, ["data-source", "locked-items"])
+              ]),
+              _: 1
+            }, 8, ["visible", "title", "confirm-text", "cancel-text"])
+          ], 64)) : createCommentVNode("", true)
+        ]),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+const GroupChatSetting = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d23cd9b4"]]);
+export {
+  GroupChatSetting as default
+};

package/dist/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;