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

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

@@ -0,0 +1,37 @@
+import { FriendApplication, FriendApplicationInfoProps } from '../../../../types/contact';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FriendApplicationInfoProps>, {
+    showActions: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+    accept: (application: FriendApplication) => void;
+    refuse: (application: FriendApplication) => void;
+    friendApplicationAction: (action: "accept" | "refuse", application: FriendApplication) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FriendApplicationInfoProps>, {
+    showActions: boolean;
+}>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onAccept?: ((application: FriendApplication) => any) | undefined;
+    onRefuse?: ((application: FriendApplication) => any) | undefined;
+    onFriendApplicationAction?: ((action: "accept" | "refuse", application: FriendApplication) => 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/FriendApplicationInfo/index.d.ts

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

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

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

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

@@ -0,0 +1,228 @@
+import { defineComponent, ref, watch, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, unref, Fragment, withKeys, withCtx, createTextVNode } from "vue";
+import { useUIKit, TUIInput, TUIButton, IconEditNameCard, TUISwitch, TUIDialog } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../../../Avatar/Avatar.js";
+import { useContactListState } from "../../../../states/ContactListState/ContactListState.js";
+import { useConversationListState } from "../../../../states/ConversationListState/ConversationListState.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "contact-friend-info" };
+const _hoisted_2 = { class: "contact-friend-info__header" };
+const _hoisted_3 = { class: "contact-friend-info__main-info" };
+const _hoisted_4 = { class: "contact-friend-info__name" };
+const _hoisted_5 = { class: "contact-friend-info__id" };
+const _hoisted_6 = { class: "contact-friend-info__intro" };
+const _hoisted_7 = { class: "contact-friend-info__rows" };
+const _hoisted_8 = { class: "contact-friend-info__row" };
+const _hoisted_9 = { class: "contact-friend-info__row-label" };
+const _hoisted_10 = { class: "contact-friend-info__row-value" };
+const _hoisted_11 = { class: "remark-edit" };
+const _hoisted_12 = { class: "contact-friend-info__row" };
+const _hoisted_13 = { class: "contact-friend-info__row-label" };
+const _hoisted_14 = { class: "contact-friend-info__row-value" };
+const _hoisted_15 = {
+  key: 0,
+  class: "contact-friend-info__actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "FriendInfo",
+  props: {
+    friend: {},
+    onSendMessage: {},
+    onDeleteFriend: {},
+    onAddToBlacklist: {},
+    onUpdateFriendRemark: {},
+    showActions: { type: Boolean, default: true },
+    onClose: {}
+  },
+  emits: ["close", "sendMessage", "deleteFriend", "addToBlacklist", "updateFriendRemark"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const {
+      deleteFriend,
+      addToBlacklist,
+      removeFromBlacklist,
+      setFriendRemark,
+      blackList
+    } = useContactListState();
+    const { setActiveConversation } = useConversationListState();
+    const isEditing = ref(false);
+    const currentUserID = ref("");
+    const remark = ref(props.friend.remark || "");
+    const remarkInput = ref(props.friend.remark || "");
+    const remarkLoading = ref(false);
+    const blackLoading = ref(false);
+    const visible = ref(false);
+    watch(() => props.friend.remark, (newRemark) => {
+      remark.value = newRemark || "";
+      remarkInput.value = newRemark || "";
+    });
+    watch(() => props.friend.userID, () => {
+      if (props.friend.userID !== currentUserID.value) {
+        isEditing.value = false;
+      }
+      currentUserID.value = props.friend.userID;
+    });
+    const displayName = computed(() => {
+      var _a;
+      return remark.value || ((_a = props.friend) == null ? void 0 : _a.nick) || props.friend.userID;
+    });
+    const isBlacklisted = computed(() => blackList.value.some((item) => item.userID === props.friend.userID));
+    const startEditRemark = () => {
+      remarkInput.value = remark.value;
+      isEditing.value = true;
+    };
+    const handleRemarkSave = async () => {
+      if (remarkInput.value.trim() === remark.value) {
+        isEditing.value = false;
+        return;
+      }
+      remarkLoading.value = true;
+      try {
+        await setFriendRemark({ userID: props.friend.userID, remark: remarkInput.value.trim() });
+        remark.value = remarkInput.value.trim();
+        isEditing.value = false;
+        emit("updateFriendRemark", { ...props.friend, remark: remarkInput.value.trim() }, remarkInput.value.trim());
+      } catch (err) {
+        console.error("[ContactInfo setFriendRemark] error", err);
+      } finally {
+        remarkLoading.value = false;
+      }
+    };
+    const handleBlacklistChange = async (checked) => {
+      blackLoading.value = true;
+      try {
+        if (checked) {
+          await addToBlacklist([props.friend.userID]);
+          emit("addToBlacklist", props.friend);
+        } else {
+          await removeFromBlacklist([props.friend.userID]);
+        }
+      } catch (err) {
+        console.error(`[ContactInfo ${checked ? "addToBlacklist" : "removeFromBlacklist"}] error`, err);
+      } finally {
+        blackLoading.value = false;
+      }
+    };
+    const handleDeleteFriend = async () => {
+      try {
+        await deleteFriend({ userIDList: [props.friend.userID] });
+        emit("deleteFriend", props.friend);
+      } catch (err) {
+        console.error("[ContactInfo deleteFriend] error", err);
+      }
+      visible.value = false;
+      emit("close");
+    };
+    const handleSendMessage = () => {
+      emit("sendMessage", props.friend);
+      setActiveConversation(`C2C${props.friend.userID}`);
+      emit("close");
+    };
+    return (_ctx, _cache) => {
+      var _a;
+      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.friend.userID), 1),
+            createElementVNode("div", _hoisted_6, toDisplayString(unref(t)("TUIContact.Personal signature")) + "：" + toDisplayString(((_a = _ctx.friend) == null ? void 0 : _a.selfSignature) || ""), 1)
+          ]),
+          createVNode(unref(Avatar), {
+            src: _ctx.friend.avatar,
+            alt: displayName.value,
+            size: "xl"
+          }, null, 8, ["src", "alt"])
+        ]),
+        createElementVNode("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("div", _hoisted_9, toDisplayString(unref(t)("TUIContact.Remark name")), 1),
+            createElementVNode("div", _hoisted_10, [
+              isEditing.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                createVNode(unref(TUIInput), {
+                  modelValue: remarkInput.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => remarkInput.value = $event),
+                  "max-length": 32,
+                  disabled: remarkLoading.value,
+                  "auto-focus": "",
+                  onBlur: handleRemarkSave,
+                  onKeydown: withKeys(handleRemarkSave, ["enter"])
+                }, null, 8, ["modelValue", "disabled"]),
+                createVNode(unref(TUIButton), {
+                  size: "small",
+                  type: "primary",
+                  loading: remarkLoading.value,
+                  onClick: handleRemarkSave
+                }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(t)("TUIContact.Save")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["loading"])
+              ], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                createElementVNode("span", _hoisted_11, toDisplayString(remark.value || unref(t)("TUIContact.None")), 1),
+                createVNode(unref(IconEditNameCard), {
+                  class: "remark-edit-icon",
+                  onClick: startEditRemark
+                })
+              ], 64))
+            ])
+          ]),
+          createElementVNode("div", _hoisted_12, [
+            createElementVNode("div", _hoisted_13, toDisplayString(unref(t)("TUIContact.Add to blacklist")), 1),
+            createElementVNode("div", _hoisted_14, [
+              createVNode(unref(TUISwitch), {
+                modelValue: isBlacklisted.value,
+                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isBlacklisted.value = $event),
+                disabled: blackLoading.value,
+                onChange: handleBlacklistChange
+              }, null, 8, ["modelValue", "disabled"])
+            ])
+          ])
+        ]),
+        _ctx.showActions ? (openBlock(), createElementBlock("div", _hoisted_15, [
+          createVNode(unref(TUIButton), {
+            type: "default",
+            size: "big",
+            color: "red",
+            onClick: _cache[2] || (_cache[2] = ($event) => {
+              visible.value = true;
+            })
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.Delete friend")), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TUIButton), {
+            type: "primary",
+            size: "big",
+            onClick: handleSendMessage
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.Send message")), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TUIDialog), {
+            visible: visible.value,
+            title: unref(t)("TUIContact.Confirm delete friend"),
+            "confirm-text": unref(t)("TUIContact.Submit"),
+            "cancel-text": unref(t)("TUIContact.Cancel"),
+            onConfirm: handleDeleteFriend,
+            onCancel: _cache[3] || (_cache[3] = ($event) => {
+              visible.value = false;
+            }),
+            onClose: _cache[4] || (_cache[4] = ($event) => {
+              visible.value = false;
+            })
+          }, null, 8, ["visible", "title", "confirm-text", "cancel-text"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const FriendInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-5772bab5"]]);
+export {
+  FriendInfo as default
+};

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

@@ -0,0 +1,39 @@
+import { Friend, FriendInfoProps } from '../../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FriendInfoProps>, {
+    showActions: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+    sendMessage: (friend: Friend) => void;
+    deleteFriend: (friend: Friend) => void;
+    addToBlacklist: (friend: Friend) => void;
+    updateFriendRemark: (friend: Friend, remark: string) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<FriendInfoProps>, {
+    showActions: boolean;
+}>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onSendMessage?: ((friend: Friend) => any) | undefined;
+    onDeleteFriend?: ((friend: Friend) => any) | undefined;
+    onAddToBlacklist?: ((friend: Friend) => any) | undefined;
+    onUpdateFriendRemark?: ((friend: Friend, remark: 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/FriendInfo/index.d.ts

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

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

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

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

@@ -0,0 +1,101 @@
+import { defineComponent, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, unref, withCtx, createTextVNode } from "vue";
+import { useUIKit, TUIButton } from "@tencentcloud/uikit-base-component-vue3";
+import Avatar from "../../../Avatar/Avatar.js";
+import { useContactListState } from "../../../../states/ContactListState/ContactListState.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "contact-group-application-info" };
+const _hoisted_2 = { class: "contact-group-application-info__header" };
+const _hoisted_3 = { class: "contact-group-application-info__main-info" };
+const _hoisted_4 = { class: "contact-group-application-info__name" };
+const _hoisted_5 = { class: "contact-group-application-info__id" };
+const _hoisted_6 = { class: "contact-group-application-info__intro" };
+const _hoisted_7 = { class: "contact-group-application-info__rows" };
+const _hoisted_8 = { class: "contact-group-application-info__row" };
+const _hoisted_9 = { class: "contact-group-application-info__row-label" };
+const _hoisted_10 = { class: "contact-group-application-info__row-value" };
+const _hoisted_11 = {
+  key: 0,
+  class: "contact-group-application-info__actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupApplicationInfo",
+  props: {
+    application: {},
+    onAccept: {},
+    onRefuse: {},
+    showActions: { type: Boolean, default: true },
+    onClose: {}
+  },
+  emits: ["accept", "refuse", "groupApplicationAction", "close"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { acceptGroupApplication, refuseGroupApplication } = useContactListState();
+    const displayName = computed(() => props.application.applicantNick || props.application.applicant);
+    const groupName = computed(() => props.application.groupName || props.application.groupID);
+    const applicationText = computed(
+      () => props.application.applicationType === 0 ? `${t("TUIContact.Apply to join group")}"${groupName.value}"` : `${t("TUIContact.Invite you to join group")}"${groupName.value}"`
+    );
+    const handleAccept = () => {
+      emit("accept", props.application);
+      emit("groupApplicationAction", "accept", props.application);
+      acceptGroupApplication({ application: props.application });
+      emit("close");
+    };
+    const handleRefuse = () => {
+      emit("refuse", props.application);
+      emit("groupApplicationAction", "refuse", props.application);
+      refuseGroupApplication({ application: props.application });
+      emit("close");
+    };
+    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.application.applicant), 1),
+            createElementVNode("div", _hoisted_6, toDisplayString(applicationText.value), 1)
+          ]),
+          createVNode(unref(Avatar), {
+            alt: displayName.value,
+            size: "xl"
+          }, null, 8, ["alt"])
+        ]),
+        createElementVNode("div", _hoisted_7, [
+          createElementVNode("div", _hoisted_8, [
+            createElementVNode("div", _hoisted_9, toDisplayString(unref(t)("TUIContact.Application note")) + "： ", 1),
+            createElementVNode("div", _hoisted_10, toDisplayString(_ctx.application.note || unref(t)("TUIContact.None")), 1)
+          ])
+        ]),
+        _ctx.showActions ? (openBlock(), createElementBlock("div", _hoisted_11, [
+          createVNode(unref(TUIButton), {
+            type: "default",
+            size: "big",
+            color: "red",
+            onClick: handleRefuse
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.Refuse")), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TUIButton), {
+            type: "primary",
+            size: "big",
+            onClick: handleAccept
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.Agree")), 1)
+            ]),
+            _: 1
+          })
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const GroupApplicationInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8608f244"]]);
+export {
+  GroupApplicationInfo as default
+};

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

@@ -0,0 +1,37 @@
+import { GroupApplication, GroupApplicationInfoProps } from '../../../../types/contact';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GroupApplicationInfoProps>, {
+    showActions: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+    accept: (application: GroupApplication) => void;
+    refuse: (application: GroupApplication) => void;
+    groupApplicationAction: (action: "accept" | "refuse", application: GroupApplication) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GroupApplicationInfoProps>, {
+    showActions: boolean;
+}>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onAccept?: ((application: GroupApplication) => any) | undefined;
+    onRefuse?: ((application: GroupApplication) => any) | undefined;
+    onGroupApplicationAction?: ((action: "accept" | "refuse", application: GroupApplication) => 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/GroupApplicationInfo/index.d.ts

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

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

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

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

@@ -0,0 +1,154 @@
+import { defineComponent, ref, computed, createElementBlock, openBlock, createElementVNode, createCommentVNode, createVNode, toDisplayString, unref, createBlock, withCtx, createTextVNode } from "vue";
+import { useUIKit, TUIButton, TUIDialog } from "@tencentcloud/uikit-base-component-vue3";
+import { GroupMemberRole, GroupPermission } from "../../../../states/GroupSettingState/types.js";
+import Avatar from "../../../Avatar/Avatar.js";
+import { useGroupSettingState } from "../../../../states/GroupSettingState/GroupSettingState.js";
+import { useConversationListState } from "../../../../states/ConversationListState/ConversationListState.js";
+import { _ as _export_sfc } from "../../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "contact-group-info" };
+const _hoisted_2 = { class: "contact-group-info__header" };
+const _hoisted_3 = { class: "contact-group-info__main-info" };
+const _hoisted_4 = { class: "contact-group-info__name" };
+const _hoisted_5 = { class: "contact-group-info__id" };
+const _hoisted_6 = { class: "contact-group-info__id" };
+const _hoisted_7 = { class: "contact-group-info__intro" };
+const _hoisted_8 = {
+  key: 0,
+  class: "contact-group-info__actions"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "GroupInfo",
+  props: {
+    group: {},
+    onEnterGroup: {},
+    onLeaveGroup: {},
+    onDismissGroup: {},
+    showActions: { type: Boolean, default: true },
+    onClose: {}
+  },
+  emits: ["close", "enterGroup", "leaveGroup", "dismissGroup"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useUIKit();
+    const { quitGroup, dismissGroup, hasPermission } = useGroupSettingState();
+    const { setActiveConversation } = useConversationListState();
+    const visible = ref(false);
+    const displayName = computed(() => props.group.name || props.group.groupID);
+    const role = computed(() => {
+      var _a;
+      return ((_a = props.group.selfInfo) == null ? void 0 : _a.role) || GroupMemberRole.COMMON;
+    });
+    const groupType = computed(() => props.group.type);
+    const canDismissGroup = computed(
+      () => hasPermission(GroupPermission.DISMISS_GROUP, role.value, groupType.value)
+    );
+    const canQuitGroup = computed(
+      () => hasPermission(GroupPermission.QUIT_GROUP, role.value, groupType.value)
+    );
+    const handleEnterGroup = () => {
+      setActiveConversation(`GROUP${props.group.groupID}`);
+      emit("enterGroup", props.group);
+      emit("close");
+    };
+    const handleLeaveGroup = async () => {
+      try {
+        await quitGroup(props.group.groupID);
+        emit("leaveGroup", props.group);
+      } catch (err) {
+        console.error("[ContactInfo quitGroup] error", err);
+      }
+      visible.value = false;
+      emit("close");
+    };
+    const handleDismissGroup = async () => {
+      try {
+        await dismissGroup(props.group.groupID);
+        emit("dismissGroup", props.group);
+      } catch (err) {
+        console.error("[ContactInfo dismissGroup] error", err);
+      }
+      visible.value = false;
+      emit("close");
+    };
+    const handleGroupAction = () => {
+      if (canDismissGroup.value) {
+        handleDismissGroup();
+      } else {
+        handleLeaveGroup();
+      }
+    };
+    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(_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"])
+        ]),
+        _ctx.showActions ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          canDismissGroup.value ? (openBlock(), createBlock(unref(TUIButton), {
+            key: 0,
+            type: "default",
+            size: "big",
+            color: "red",
+            onClick: _cache[0] || (_cache[0] = ($event) => {
+              visible.value = true;
+            })
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.dismiss group")), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          canQuitGroup.value ? (openBlock(), createBlock(unref(TUIButton), {
+            key: 1,
+            type: "default",
+            size: "big",
+            color: "red",
+            onClick: _cache[1] || (_cache[1] = ($event) => visible.value = true)
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.quit group")), 1)
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createVNode(unref(TUIButton), {
+            type: "primary",
+            size: "big",
+            onClick: handleEnterGroup
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(unref(t)("TUIContact.Enter group chat")), 1)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(TUIDialog), {
+            visible: visible.value,
+            title: canDismissGroup.value ? unref(t)("TUIContact.Confirm dismiss group") : unref(t)("TUIContact.Confirm quit group"),
+            "confirm-text": unref(t)("TUIContact.Submit"),
+            "cancel-text": unref(t)("TUIContact.Cancel"),
+            onConfirm: handleGroupAction,
+            onCancel: _cache[2] || (_cache[2] = ($event) => {
+              visible.value = false;
+            }),
+            onClose: _cache[3] || (_cache[3] = ($event) => {
+              visible.value = false;
+            })
+          }, null, 8, ["visible", "title", "confirm-text", "cancel-text"])
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+const GroupInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-8f45a224"]]);
+export {
+  GroupInfo as default
+};

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

@@ -0,0 +1,37 @@
+import { GroupInfoProps, GroupModel } from '../../../../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GroupInfoProps>, {
+    showActions: boolean;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => void;
+    dismissGroup: (group: GroupModel) => void;
+    enterGroup: (group: GroupModel) => void;
+    leaveGroup: (group: GroupModel) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<GroupInfoProps>, {
+    showActions: boolean;
+}>>> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onDismissGroup?: ((group: GroupModel) => any) | undefined;
+    onEnterGroup?: ((group: GroupModel) => any) | undefined;
+    onLeaveGroup?: ((group: GroupModel) => 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/GroupInfo/index.d.ts

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