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

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 { 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-24700623"]]);
+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
+};

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

@@ -0,0 +1,285 @@
+import { defineComponent, ref, computed, createBlock, createCommentVNode, unref, openBlock, normalizeClass, withCtx, createVNode, createElementVNode, toDisplayString } from "vue";
+import { useUIKit, IconArrowStrokeBack, TUIDialog, TUIToast } from "@tencentcloud/uikit-base-component-vue3";
+import { View as _sfc_main$1 } from "../../../../baseComp/View/index.js";
+import "../../../UserPicker/index.js";
+import SettingItem from "../../SettingItem/SettingItem.js";
+import GroupMembers from "../GroupMembers/GroupMembers.js";
+import { useGroupSettingState } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { GroupMemberRole, 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: "group-management__title" };
+const _hoisted_2 = { class: "group-management__mute-all-desc" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupManagement",
+  emits: ["back"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const { t } = useUIKit();
+    const {
+      groupID,
+      allMembers,
+      adminMembers,
+      currentUserID,
+      currentUserRole,
+      isMuteAllMembers,
+      hasPermission,
+      // Business actions
+      getGroupMemberList,
+      setGroupMemberRole,
+      setGroupMemberMuteTime,
+      setMuteAllMember
+    } = useGroupSettingState();
+    const isShowUserPickerDialog = ref(false);
+    const userPickerTitle = ref("");
+    const userPickerLockedItems = ref([]);
+    const userPickerRef = ref();
+    const memberActionRef = ref(null);
+    const mutedMembers = computed(() => {
+      if (!allMembers.value) {
+        return [];
+      }
+      return allMembers.value.filter((member) => {
+        if (!member.muteUntil) {
+          return false;
+        }
+        const muteTime = parseInt(member.muteUntil, 10);
+        return muteTime > Date.now() / 1e3;
+      });
+    });
+    const handleBack = () => {
+      emit("back");
+    };
+    const handleAdminManagement = (action) => {
+      if (!allMembers.value) {
+        return;
+      }
+      if (action === "promote") {
+        memberActionRef.value = "promote_admin";
+        userPickerTitle.value = t("ChatSetting.set_admin");
+        userPickerLockedItems.value = [];
+      } else {
+        memberActionRef.value = "demote_admin";
+        userPickerTitle.value = t("ChatSetting.unset_admin");
+        const lockedItems = currentUserRole.value === GroupMemberRole.ADMIN ? [{
+          key: currentUserID.value
+        }] : [];
+        userPickerLockedItems.value = lockedItems;
+      }
+      isShowUserPickerDialog.value = true;
+    };
+    const handleMuteManagement = (action) => {
+      if (!allMembers.value) {
+        return;
+      }
+      isShowUserPickerDialog.value = true;
+      if (action === "mute") {
+        memberActionRef.value = "mute";
+        userPickerTitle.value = t("ChatSetting.mute_members");
+        const lockedItems = allMembers.value.filter((member) => {
+          if (member.userID === currentUserID.value) {
+            return true;
+          }
+          if (member.role === GroupMemberRole.OWNER) {
+            return true;
+          }
+          if (currentUserRole.value === GroupMemberRole.ADMIN && member.role === GroupMemberRole.ADMIN) {
+            return true;
+          }
+          return false;
+        }).map((member) => ({
+          key: member.userID,
+          label: member.nick || member.userID,
+          avatarUrl: member.avatar
+        }));
+        userPickerLockedItems.value = lockedItems;
+      } else {
+        memberActionRef.value = "unmute";
+        userPickerTitle.value = t("ChatSetting.unmute_members");
+        userPickerLockedItems.value = [];
+      }
+    };
+    const handleUserPickerConfirm = async () => {
+      var _a;
+      const selectedItems = (_a = userPickerRef.value) == null ? void 0 : _a.getSelectedItems();
+      if (!selectedItems || selectedItems.length === 0) {
+        return;
+      }
+      const action = memberActionRef.value;
+      if (!action) {
+        return;
+      }
+      try {
+        const promises = selectedItems.map((item) => {
+          switch (action) {
+            case "promote_admin":
+              return setGroupMemberRole({
+                userID: item.key,
+                role: GroupMemberRole.ADMIN
+              });
+            case "demote_admin":
+              return setGroupMemberRole({
+                userID: item.key,
+                role: GroupMemberRole.COMMON
+              });
+            case "mute":
+              return setGroupMemberMuteTime({
+                userID: item.key,
+                time: 86400 * 30
+              });
+            case "unmute":
+              return setGroupMemberMuteTime({
+                userID: item.key,
+                time: 0
+              });
+            default:
+              return Promise.resolve();
+          }
+        });
+        await Promise.all(promises);
+        TUIToast.success({
+          message: t("ChatSetting.operation_success")
+        });
+        isShowUserPickerDialog.value = false;
+        await getGroupMemberList({ offset: 0, count: 100 });
+      } catch {
+        TUIToast.error({
+          message: t("ChatSetting.operation_failed")
+        });
+      }
+    };
+    const handleMuteAllToggle = (checked) => {
+      setMuteAllMember(checked).then(() => {
+        TUIToast.success({
+          message: checked ? t("ChatSetting.all_members_muted") : t("ChatSetting.all_members_unmuted")
+        });
+      }).catch(() => {
+        TUIToast.error({
+          message: t("ChatSetting.mute_all_failed")
+        });
+      });
+    };
+    const userPickerDataSource = computed(() => {
+      if (!allMembers.value || !isShowUserPickerDialog.value) {
+        return [];
+      }
+      const action = memberActionRef.value;
+      let filteredMembers = allMembers.value;
+      switch (action) {
+        case "promote_admin":
+          filteredMembers = allMembers.value.filter((member) => member.role === GroupMemberRole.COMMON);
+          break;
+        case "demote_admin":
+          filteredMembers = adminMembers.value || [];
+          break;
+        case "mute":
+          filteredMembers = allMembers.value.filter((member) => {
+            const muteTime = member.muteUntil ? parseInt(member.muteUntil, 10) : 0;
+            return muteTime * 1e3 <= Date.now();
+          });
+          break;
+        case "unmute":
+          filteredMembers = allMembers.value.filter((member) => {
+            const muteTime = member.muteUntil ? parseInt(member.muteUntil, 10) : 0;
+            return muteTime * 1e3 > Date.now();
+          });
+          break;
+      }
+      return filteredMembers.map((member) => ({
+        key: member.userID,
+        label: `${member.nick || member.userID} (${member.userID === currentUserID.value ? "Me" : member.role})`,
+        avatarUrl: member.avatar
+      }));
+    });
+    return (_ctx, _cache) => {
+      return unref(groupID) ? (openBlock(), createBlock(unref(_sfc_main$1), {
+        key: 0,
+        class: normalizeClass("group-management")
+      }, {
+        default: withCtx(() => {
+          var _a;
+          return [
+            createVNode(unref(_sfc_main$1), {
+              class: "group-management__header",
+              dir: "row",
+              align: "center",
+              justify: "flex-start",
+              gap: 8
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(IconArrowStrokeBack), {
+                  class: "group-management__back-btn",
+                  onClick: handleBack
+                }),
+                createElementVNode("span", _hoisted_1, toDisplayString(unref(t)("ChatSetting.group_management")), 1)
+              ]),
+              _: 1
+            }),
+            unref(hasPermission)(unref(GroupPermission).SET_MEMBER_ROLE, unref(GroupMemberRole).OWNER) ? (openBlock(), createBlock(unref(GroupMembers), {
+              key: 0,
+              title: unref(t)("ChatSetting.group_admin"),
+              members: unref(adminMembers),
+              "member-count": ((_a = unref(adminMembers)) == null ? void 0 : _a.length) || 0,
+              "hidden-member-count": true,
+              "show-add-button": unref(currentUserRole) === unref(GroupMemberRole).OWNER,
+              "show-remove-button": unref(currentUserRole) === unref(GroupMemberRole).OWNER,
+              expandable: true,
+              onAddButtonClick: _cache[0] || (_cache[0] = () => handleAdminManagement("promote")),
+              onRemoveButtonClick: _cache[1] || (_cache[1] = () => handleAdminManagement("demote"))
+            }, null, 8, ["title", "members", "member-count", "show-add-button", "show-remove-button"])) : createCommentVNode("", true),
+            unref(hasPermission)(unref(GroupPermission).MUTE_MEMBER) ? (openBlock(), createBlock(unref(GroupMembers), {
+              key: 1,
+              title: unref(t)("ChatSetting.mute_management"),
+              members: mutedMembers.value,
+              "member-count": mutedMembers.value.length,
+              "show-add-button": true,
+              "show-remove-button": true,
+              expandable: true,
+              onAddButtonClick: _cache[2] || (_cache[2] = () => handleMuteManagement("mute")),
+              onRemoveButtonClick: _cache[3] || (_cache[3] = () => handleMuteManagement("unmute"))
+            }, null, 8, ["title", "members", "member-count"])) : createCommentVNode("", true),
+            unref(hasPermission)(unref(GroupPermission).MUTE_ALL_MEMBERS) && unref(isMuteAllMembers) !== void 0 ? (openBlock(), createBlock(unref(_sfc_main$1), {
+              key: 2,
+              class: "group-management__mute-all"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(SettingItem), {
+                  type: "switch",
+                  label: unref(t)("ChatSetting.mute_all_members"),
+                  value: unref(isMuteAllMembers),
+                  onChange: _cache[4] || (_cache[4] = () => handleMuteAllToggle(!unref(isMuteAllMembers)))
+                }, null, 8, ["label", "value"]),
+                createElementVNode("div", _hoisted_2, toDisplayString(unref(t)("ChatSetting.mute_all_members_description")), 1)
+              ]),
+              _: 1
+            })) : createCommentVNode("", true),
+            createVNode(unref(TUIDialog), {
+              "custom-classes": ["user-picker-dialog"],
+              visible: isShowUserPickerDialog.value,
+              title: userPickerTitle.value,
+              onClose: _cache[5] || (_cache[5] = () => isShowUserPickerDialog.value = false),
+              onCancel: _cache[6] || (_cache[6] = () => isShowUserPickerDialog.value = false),
+              onConfirm: handleUserPickerConfirm
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(UserPicker), {
+                  ref_key: "userPickerRef",
+                  ref: userPickerRef,
+                  "display-mode": "list",
+                  "data-source": userPickerDataSource.value,
+                  "locked-items": userPickerLockedItems.value
+                }, null, 8, ["data-source", "locked-items"])
+              ]),
+              _: 1
+            }, 8, ["visible", "title"])
+          ];
+        }),
+        _: 1
+      })) : createCommentVNode("", true);
+    };
+  }
+});
+const GroupManagement = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-273493c6"]]);
+export {
+  GroupManagement as default
+};

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

@@ -0,0 +1,6 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    back: () => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

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

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

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

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

@@ -0,0 +1,38 @@
+import { defineComponent, computed, createElementBlock, createCommentVNode, openBlock, normalizeClass, createElementVNode, createVNode, toDisplayString, unref } from "vue";
+import { useUIKit, IconArrowStrokeRight } from "@tencentcloud/uikit-base-component-vue3";
+import { useGroupSettingState } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { GroupPermission } from "../../../../states/GroupSettingState/types.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "group-management-entry__content" };
+const _hoisted_2 = { class: "group-management-entry__title" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupManagementEntry",
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { hasPermission } = useGroupSettingState();
+    const shouldShowGroupManagement = computed(() => hasPermission(GroupPermission.SET_MEMBER_ROLE) || hasPermission(GroupPermission.MUTE_MEMBER) || hasPermission(GroupPermission.MUTE_ALL_MEMBERS));
+    const handleClick = () => {
+      emit("click");
+    };
+    return (_ctx, _cache) => {
+      return shouldShowGroupManagement.value ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass([
+          "group-management-entry"
+        ]),
+        onClick: handleClick
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("span", _hoisted_2, toDisplayString(unref(t)("ChatSetting.group_management")), 1),
+          createVNode(unref(IconArrowStrokeRight), { class: "group-management-entry__arrow" })
+        ])
+      ])) : createCommentVNode("", true);
+    };
+  }
+});
+const GroupManagementEntry = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-55b0dd4c"]]);
+export {
+  GroupManagementEntry as default
+};

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

@@ -0,0 +1,6 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: () => void;
+}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{
+    onClick?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

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

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

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

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