tuikit-atomicx-vue3 0.1.0

package/dist/components/MessageList/ReadReceiptInfo/ReadReceiptInfo.js

@@ -0,0 +1,411 @@
+import { defineComponent, ref, computed, watch, createBlock, openBlock, unref, withCtx, createVNode, createTextVNode, toDisplayString, createElementVNode, normalizeClass, createCommentVNode, createElementBlock, Fragment, renderList } from "vue";
+import { TUIStore, TUIChatService } from "@tencentcloud/chat-uikit-engine";
+import { useUIKit, IconClose, IconLoading } from "@tencentcloud/uikit-base-component-vue3";
+import Modal from "../../../baseComp/Modal/Modal.js";
+import View from "../../../baseComp/View/View.js";
+import Avatar from "../../Avatar/Avatar.js";
+import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ReadReceiptInfo",
+  props: {
+    messageID: { default: "" },
+    open: { type: Boolean, default: false },
+    readCount: { default: 0 },
+    unreadCount: { default: 0 },
+    className: { default: void 0 },
+    style: { default: void 0 }
+  },
+  emits: ["onClose"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const { t } = useUIKit();
+    const activeTab = ref("read");
+    const readListRef = ref();
+    const unreadListRef = ref();
+    const readUsers = ref([]);
+    const readCursor = ref("");
+    const readCompleted = ref(false);
+    const readLoading = ref(false);
+    const readListVisible = ref(false);
+    const unreadUsers = ref([]);
+    const unreadCursor = ref("");
+    const unreadCompleted = ref(false);
+    const unreadLoading = ref(false);
+    const unreadListVisible = ref(false);
+    const getMessageModel = computed(() => {
+      if (!props.messageID) {
+        throw new Error("ReadReceiptInfo::Message ID is required");
+      }
+      return TUIStore.getMessageModel(props.messageID);
+    });
+    const loadReadUsers = async (cursor = "") => {
+      const message = getMessageModel.value;
+      if (!message) {
+        return;
+      }
+      if (cursor === "") {
+        readCompleted.value = false;
+      }
+      readLoading.value = true;
+      try {
+        const response = await TUIChatService.getGroupMessageReadMemberList({
+          message,
+          filter: 0,
+          // 0 indicates read members
+          cursor,
+          count: 100
+        });
+        if (response.code === 0 && response.data) {
+          const { isCompleted, cursor: nextCursor, readUserInfoList = [] } = response.data;
+          readCursor.value = nextCursor;
+          readCompleted.value = isCompleted;
+          if (cursor === "") {
+            readUsers.value = readUserInfoList;
+          } else {
+            readUsers.value = [...readUsers.value, ...readUserInfoList];
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load read users:", error);
+      } finally {
+        readLoading.value = false;
+      }
+    };
+    const loadUnreadUsers = async (cursor = "") => {
+      const message = getMessageModel.value;
+      if (!message) {
+        return;
+      }
+      if (cursor === "") {
+        unreadCompleted.value = false;
+      }
+      unreadLoading.value = true;
+      try {
+        const response = await TUIChatService.getGroupMessageReadMemberList({
+          message,
+          filter: 1,
+          // 1 indicates unread members
+          cursor,
+          count: 50
+        });
+        if (response.code === 0 && response.data) {
+          const { isCompleted, cursor: nextCursor, unreadUserInfoList = [] } = response.data;
+          unreadCursor.value = nextCursor;
+          unreadCompleted.value = isCompleted;
+          if (cursor === "") {
+            unreadUsers.value = unreadUserInfoList;
+          } else {
+            unreadUsers.value = [...unreadUsers.value, ...unreadUserInfoList];
+          }
+        }
+      } catch (error) {
+        console.error("Failed to load unread users:", error);
+      } finally {
+        unreadLoading.value = false;
+      }
+    };
+    const resetReadState = () => {
+      readUsers.value = [];
+      readCursor.value = "";
+      readCompleted.value = false;
+      readListVisible.value = false;
+    };
+    const resetUnreadState = () => {
+      unreadUsers.value = [];
+      unreadCursor.value = "";
+      unreadCompleted.value = false;
+      unreadListVisible.value = false;
+    };
+    const setActiveTab = (tab) => {
+      activeTab.value = tab;
+    };
+    const handleScroll = (event) => {
+      const target = event.target;
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      if (scrollHeight - scrollTop - clientHeight < 50) {
+        if (activeTab.value === "read" && !readCompleted.value && !readLoading.value && readCursor.value) {
+          loadReadUsers(readCursor.value);
+        } else if (activeTab.value === "unread" && !unreadCompleted.value && !unreadLoading.value && unreadCursor.value) {
+          loadUnreadUsers(unreadCursor.value);
+        }
+      }
+    };
+    const handleClose = (e, reason) => {
+      emits("onClose", e, reason);
+    };
+    watch(() => props.open, (newOpen) => {
+      if (newOpen) {
+        resetReadState();
+        resetUnreadState();
+        loadReadUsers();
+        loadUnreadUsers();
+      }
+    });
+    watch([() => props.readCount, () => props.unreadCount], () => {
+      if (props.open && props.messageID) {
+        if (activeTab.value === "read") {
+          loadReadUsers();
+        } else {
+          loadUnreadUsers();
+        }
+      }
+    });
+    watch(() => [readUsers.value.length, readLoading.value], () => {
+      let timer;
+      if (readUsers.value.length > 0 && !readLoading.value) {
+        timer = setTimeout(() => {
+          readListVisible.value = true;
+        }, 50);
+      }
+      return () => clearTimeout(timer);
+    });
+    watch(() => [unreadUsers.value.length, unreadLoading.value], () => {
+      let timer;
+      if (unreadUsers.value.length > 0 && !unreadLoading.value) {
+        timer = setTimeout(() => {
+          unreadListVisible.value = true;
+        }, 50);
+      }
+      return () => clearTimeout(timer);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Modal), {
+        open: _ctx.open,
+        "content-class": "readReceiptInfo",
+        onOnClose: handleClose
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(View), { class: "read-receipt-info__header" }, {
+            default: withCtx(() => [
+              createVNode(unref(IconClose), {
+                class: "read-receipt-info__close-icon",
+                onClick: handleClose
+              }),
+              createVNode(unref(View), { class: "read-receipt-info__title" }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(unref(t)("TUIChat.Read Receipt Detail")), 1)
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(unref(View), { class: "read-receipt-info__tabs" }, {
+            default: withCtx(() => [
+              createElementVNode("button", {
+                class: normalizeClass([
+                  "read-receipt-info__tab-button",
+                  { "read-receipt-info__tab-button--active": activeTab.value === "read" }
+                ]),
+                onClick: _cache[0] || (_cache[0] = ($event) => setActiveTab("read"))
+              }, toDisplayString(unref(t)("TUIChat.Read")) + " (" + toDisplayString(_ctx.readCount) + ") ", 3),
+              createElementVNode("button", {
+                class: normalizeClass([
+                  "read-receipt-info__tab-button",
+                  { "read-receipt-info__tab-button--active": activeTab.value === "unread" }
+                ]),
+                onClick: _cache[1] || (_cache[1] = ($event) => setActiveTab("unread"))
+              }, toDisplayString(unref(t)("TUIChat.Unread")) + " (" + toDisplayString(_ctx.unreadCount) + ") ", 3)
+            ]),
+            _: 1
+          }),
+          createVNode(unref(View), { class: "read-receipt-info__content" }, {
+            default: withCtx(() => [
+              activeTab.value === "read" ? (openBlock(), createBlock(unref(View), {
+                key: 0,
+                ref_key: "readListRef",
+                ref: readListRef,
+                class: "read-receipt-info__user-list",
+                onScroll: handleScroll
+              }, {
+                default: withCtx(() => [
+                  readUsers.value.length === 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    readLoading.value ? (openBlock(), createBlock(unref(View), {
+                      key: 0,
+                      class: "read-receipt-info__loading"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconLoading), { class: "read-receipt-info__loading-icon" }),
+                        createVNode(unref(View), { class: "read-receipt-info__loading-text" }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("TUIChat.Loading")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })) : (openBlock(), createBlock(unref(View), {
+                      key: 1,
+                      class: "read-receipt-info__empty"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("TUIChat.No Read Members")), 1)
+                      ]),
+                      _: 1
+                    }))
+                  ], 64)) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass([
+                      "read-receipt-info__user-list-container",
+                      { "read-receipt-info__user-list-container--visible": readListVisible.value }
+                    ])
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(readUsers.value, (user) => {
+                      return openBlock(), createBlock(unref(View), {
+                        key: user.userID,
+                        class: "read-receipt-info__user-item"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(Avatar), {
+                            src: user.avatar ?? "",
+                            alt: user.nick || user.userID
+                          }, null, 8, ["src", "alt"]),
+                          createVNode(unref(View), { class: "read-receipt-info__user-item-info" }, {
+                            default: withCtx(() => [
+                              createVNode(unref(View), { class: "read-receipt-info__user-item-name" }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(user.nick || user.userID), 1)
+                                ]),
+                                _: 2
+                              }, 1024)
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ]),
+                        _: 2
+                      }, 1024);
+                    }), 128)),
+                    readLoading.value ? (openBlock(), createBlock(unref(View), {
+                      key: 0,
+                      class: "read-receipt-info__loading"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconLoading), { class: "read-receipt-info__loading-icon" }),
+                        createVNode(unref(View), { class: "read-receipt-info__loading-text" }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("TUIChat.Loading")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    readCompleted.value ? (openBlock(), createBlock(unref(View), {
+                      key: 1,
+                      class: "read-receipt-info__list-end"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("TUIChat.No More")), 1)
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true)
+                  ], 2))
+                ]),
+                _: 1
+              }, 512)) : createCommentVNode("", true),
+              activeTab.value === "unread" ? (openBlock(), createBlock(unref(View), {
+                key: 1,
+                ref_key: "unreadListRef",
+                ref: unreadListRef,
+                class: "read-receipt-info__user-list",
+                onScroll: handleScroll
+              }, {
+                default: withCtx(() => [
+                  unreadUsers.value.length === 0 ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                    unreadLoading.value ? (openBlock(), createBlock(unref(View), {
+                      key: 0,
+                      class: "read-receipt-info__loading"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconLoading), { class: "read-receipt-info__loading-icon" }),
+                        createVNode(unref(View), { class: "read-receipt-info__loading-text" }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("TUIChat.Loading")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })) : (openBlock(), createBlock(unref(View), {
+                      key: 1,
+                      class: "read-receipt-info__empty"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("TUIChat.No Unread Members")), 1)
+                      ]),
+                      _: 1
+                    }))
+                  ], 64)) : (openBlock(), createElementBlock("div", {
+                    key: 1,
+                    class: normalizeClass([
+                      "read-receipt-info__user-list-container",
+                      { "read-receipt-info__user-list-container--visible": unreadListVisible.value }
+                    ])
+                  }, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(unreadUsers.value, (user) => {
+                      return openBlock(), createBlock(unref(View), {
+                        key: user.userID,
+                        class: "read-receipt-info__user-item"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(unref(Avatar), {
+                            src: user.avatar ?? "",
+                            alt: user.nick || user.userID
+                          }, null, 8, ["src", "alt"]),
+                          createVNode(unref(View), { class: "read-receipt-info__user-item-info" }, {
+                            default: withCtx(() => [
+                              createVNode(unref(View), { class: "read-receipt-info__user-item-name" }, {
+                                default: withCtx(() => [
+                                  createTextVNode(toDisplayString(user.nick || user.userID), 1)
+                                ]),
+                                _: 2
+                              }, 1024)
+                            ]),
+                            _: 2
+                          }, 1024)
+                        ]),
+                        _: 2
+                      }, 1024);
+                    }), 128)),
+                    unreadLoading.value ? (openBlock(), createBlock(unref(View), {
+                      key: 0,
+                      class: "read-receipt-info__loading"
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconLoading), { class: "read-receipt-info__loading-icon" }),
+                        createVNode(unref(View), { class: "read-receipt-info__loading-text" }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(unref(t)("TUIChat.Loading")), 1)
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true),
+                    unreadCompleted.value ? (openBlock(), createBlock(unref(View), {
+                      key: 1,
+                      class: "read-receipt-info__list-end"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(unref(t)("TUIChat.No More")), 1)
+                      ]),
+                      _: 1
+                    })) : createCommentVNode("", true)
+                  ], 2))
+                ]),
+                _: 1
+              }, 512)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 8, ["open"]);
+    };
+  }
+});
+const ReadReceiptInfo = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-7e28bb0e"]]);
+export {
+  ReadReceiptInfo as default
+};

package/dist/components/MessageList/ReadReceiptInfo/ReadReceiptInfo.vue.d.ts

@@ -0,0 +1,58 @@
+interface ReadReceiptInfoProps {
+    /** Message ID */
+    messageID: string;
+    /** Whether the forward modal is open */
+    open: boolean;
+    /** Read count */
+    readCount?: number;
+    /** Unread count */
+    unreadCount?: number;
+    /** Additional class names for styling */
+    className?: string | undefined;
+    /** Custom style */
+    style?: Record<string, any> | undefined;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ReadReceiptInfoProps>, {
+    messageID: string;
+    open: boolean;
+    readCount: number;
+    unreadCount: number;
+    className: undefined;
+    style: undefined;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    onClose: (e?: unknown, reason?: "escapeKeyDown" | "backdropClick" | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<ReadReceiptInfoProps>, {
+    messageID: string;
+    open: boolean;
+    readCount: number;
+    unreadCount: number;
+    className: undefined;
+    style: undefined;
+}>>> & Readonly<{
+    onOnClose?: ((e?: unknown, reason?: "escapeKeyDown" | "backdropClick" | undefined) => any) | undefined;
+}>, {
+    style: Record<string, any>;
+    open: boolean;
+    unreadCount: number;
+    className: string;
+    messageID: string;
+    readCount: number;
+}, {}, {}, {}, 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/MessageList/ReadReceiptInfo/index.d.ts

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

package/dist/components/MessageList/ReadReceiptInfo/index.js

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

package/dist/components/MessageList/index.d.ts

@@ -0,0 +1,5 @@
+import { Message } from './Message';
+import { MessageActionDropdown } from './Message/MessageLayout/MessageActionDropdown';
+import { default as MessageList } from './MessageList.vue';
+
+export { Message, MessageList, MessageActionDropdown, };

package/dist/components/MessageList/index.js

@@ -0,0 +1,8 @@
+import { _ } from "../../Message.vue_vue_type_script_setup_true_lang-BV0PxtjX.js";
+import { default as default2 } from "./Message/MessageLayout/MessageActionDropdown/MessageActionDropdown.js";
+import { default as default3 } from "./MessageList.js";
+export {
+  _ as Message,
+  default2 as MessageActionDropdown,
+  default3 as MessageList
+};

package/dist/components/MicButton/AudioIcon.js

@@ -0,0 +1,48 @@
+import { defineComponent, computed, createElementBlock, openBlock, normalizeClass, createElementVNode, createBlock, normalizeStyle, unref } from "vue";
+import { IconMicOff, IconMicOn } from "@tencentcloud/uikit-base-component-vue3";
+import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = { class: "audio-level-container" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "AudioIcon",
+  props: {
+    userId: {},
+    audioVolume: {},
+    isMuted: { type: Boolean },
+    size: {},
+    isDisabled: { type: Boolean }
+  },
+  setup(__props) {
+    const props = __props;
+    const audioLevelStyle = computed(() => {
+      if (props.isMuted || !props.audioVolume) {
+        return "";
+      }
+      return `height: ${props.audioVolume * 4}%`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["audio-icon-container", `${_ctx.size == "small" && "small"}`])
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createElementVNode("div", {
+            class: "audio-level",
+            style: normalizeStyle(audioLevelStyle.value)
+          }, null, 4)
+        ]),
+        props.isMuted ? (openBlock(), createBlock(unref(IconMicOff), {
+          key: 0,
+          class: "audio-icon",
+          size: "24"
+        })) : (openBlock(), createBlock(unref(IconMicOn), {
+          key: 1,
+          class: "audio-icon",
+          size: "24"
+        }))
+      ], 2);
+    };
+  }
+});
+const AudioIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-43c1f65f"]]);
+export {
+  AudioIcon as default
+};

package/dist/components/MicButton/AudioIcon.vue.d.ts

@@ -0,0 +1,18 @@
+interface Props {
+    userId?: string;
+    audioVolume?: number;
+    isMuted?: boolean;
+    size?: string;
+    isDisabled?: boolean;
+}
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<Props>>> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

package/dist/components/MicButton/index.d.ts

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

package/dist/components/MicButton/index.js

@@ -0,0 +1,4 @@
+import { i } from "../../index-NFANFVi5.js";
+export {
+  i as MicButton
+};

package/dist/components/MicButton/index.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;