tuikit-atomicx-vue3 0.1.0 → 0.1.1

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

@@ -0,0 +1,261 @@
+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 from "../../UserPicker/UserPicker.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 { 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;

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

@@ -0,0 +1,193 @@
+import { defineComponent, computed, createBlock, openBlock, unref, normalizeClass, withCtx, createVNode, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import TUIChatEngine from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, IconCopy, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { View as _sfc_main$1 } from "../../../../baseComp/View/index.js";
+import Avatar from "../../../Avatar/Avatar.js";
+import SettingItem from "../../SettingItem/SettingItem.js";
+import { useConversationListState } from "../../../../states/ConversationListState/ConversationListState.js";
+import { useGroupSettingState } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { GroupPermission, GroupType } from "../../../../states/GroupSettingState/types.js";
+import { copyTextToClipboard } from "../../../../utils/copyText.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupInfo",
+  setup(__props) {
+    const { t } = useUIKit();
+    const {
+      groupID,
+      groupName,
+      notification,
+      groupType,
+      isInGroup,
+      hasPermission,
+      updateGroupProfile
+    } = useGroupSettingState();
+    const { currentConversation: activeConversation } = useConversationListState();
+    const getGroupTypeText = () => {
+      if (!groupType.value) {
+        return t("ChatSetting.group_type_unknown");
+      }
+      const groupTypeTextMap = {
+        [GroupType.WORK]: t("ChatSetting.group_type_work"),
+        [GroupType.PUBLIC]: t("ChatSetting.group_type_public"),
+        [GroupType.MEETING]: t("ChatSetting.group_type_meeting"),
+        [GroupType.COMMUNITY]: t("ChatSetting.group_type_community"),
+        [GroupType.AVCHATROOM]: t("ChatSetting.group_type_avchatroom")
+      };
+      return groupTypeTextMap[groupType.value] || t("ChatSetting.group_type_unknown");
+    };
+    const validateGroupName = (value, originalValue) => {
+      if (typeof value !== "string") {
+        return t("ChatSetting.group_name_required_string");
+      }
+      if (value.length === 0) {
+        return t("ChatSetting.group_name_required");
+      }
+      if (value.length > 25) {
+        return t("ChatSetting.group_name_max_length");
+      }
+      if (value === (originalValue || "")) {
+        return t("ChatSetting.group_name_unchanged");
+      }
+      return null;
+    };
+    const validateNotification = (value, originalValue) => {
+      if (typeof value !== "string") {
+        return t("ChatSetting.group_notification_required_string");
+      }
+      if (value.length > 100) {
+        return t("ChatSetting.group_notification_max_length");
+      }
+      if (value === (originalValue || "")) {
+        return t("ChatSetting.group_notification_unchanged");
+      }
+      return null;
+    };
+    const handleGroupNameConfirm = async (value) => {
+      try {
+        await updateGroupProfile({ name: value });
+        TUIToast.success({
+          message: t("ChatSetting.group_name_update_success")
+        });
+      } catch (error) {
+        TUIToast.error({
+          message: t("ChatSetting.group_name_update_failed")
+        });
+        console.warn("updateGroupProfile::groupName", error);
+      }
+    };
+    const handleNotificationConfirm = async (value) => {
+      try {
+        await updateGroupProfile({ notification: value });
+        TUIToast.success({
+          message: t("ChatSetting.group_notification_update_success")
+        });
+      } catch (error) {
+        TUIToast.error({
+          message: t("ChatSetting.group_notification_update_failed")
+        });
+        console.warn("updateGroupProfile::notification", error);
+      }
+    };
+    const handleCopyGroupID = () => {
+      if (groupID.value) {
+        copyTextToClipboard(groupID.value).then(() => {
+          TUIToast.success({
+            message: t("ChatSetting.copied")
+          });
+        });
+      }
+    };
+    const avatarUrl = computed(() => {
+      if (!activeConversation.value) {
+        return "";
+      }
+      if (activeConversation.value.type === TUIChatEngine.TYPES.CONV_GROUP) {
+        return activeConversation.value.getAvatar();
+      }
+      return "";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(_sfc_main$1), {
+        class: normalizeClass(["group-info"]),
+        gap: 10
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(_sfc_main$1), {
+            justify: "center",
+            align: "center"
+          }, {
+            default: withCtx(() => [
+              createVNode(unref(Avatar), {
+                src: avatarUrl.value || "",
+                size: "xxl"
+              }, null, 8, ["src"])
+            ]),
+            _: 1
+          }),
+          createVNode(unref(_sfc_main$1), { class: "group-info__item" }, {
+            default: withCtx(() => [
+              createVNode(unref(_sfc_main$1), { class: "group-info__label" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("ChatSetting.group_id")), 1)
+                ]),
+                _: 1
+              }),
+              createVNode(unref(_sfc_main$1), {
+                dir: "row",
+                justify: "space-between",
+                align: "center"
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(_sfc_main$1), { class: "group-info__value" }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(unref(groupID)), 1)
+                    ]),
+                    _: 1
+                  }),
+                  unref(groupID) ? (openBlock(), createBlock(unref(IconCopy), {
+                    key: 0,
+                    class: "unique-icon-btn",
+                    size: "24px",
+                    onClick: handleCopyGroupID
+                  })) : createCommentVNode("", true)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(unref(SettingItem), {
+            type: "input",
+            label: unref(t)("ChatSetting.group_name"),
+            value: unref(groupName) || "",
+            placeholder: unref(t)("ChatSetting.group_name_placeholder"),
+            editable: Boolean(unref(hasPermission)(unref(GroupPermission).EDIT_GROUP_PROFILE_NAME) && unref(isInGroup)),
+            validator: validateGroupName,
+            onConfirm: handleGroupNameConfirm
+          }, null, 8, ["label", "value", "placeholder", "editable"]),
+          createVNode(unref(SettingItem), {
+            type: "textarea",
+            label: unref(t)("ChatSetting.group_notification"),
+            value: unref(notification) || "",
+            placeholder: unref(t)("ChatSetting.group_notification_placeholder"),
+            rows: 4,
+            editable: Boolean(unref(hasPermission)(unref(GroupPermission).EDIT_GROUP_PROFILE_NOTIFICATION) && unref(isInGroup)),
+            validator: validateNotification,
+            onConfirm: handleNotificationConfirm
+          }, null, 8, ["label", "value", "placeholder", "editable"]),
+          createVNode(unref(SettingItem), {
+            type: "display",
+            label: unref(t)("ChatSetting.group_type"),
+            value: getGroupTypeText()
+          }, null, 8, ["label", "value"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const GroupInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-34eb1395"]]);
+export {
+  GroupInfo as default
+};

package/dist/components/ChatSetting/GroupChatSetting/GroupInfo/GroupInfo.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/GroupInfo/index.d.ts

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

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

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