tuikit-atomicx-vue3 4.4.0 → 4.5.1

package/dist/components/MessageList/Message/MessageLayout/MessageLayout.js

@@ -1,32 +1,34 @@
-import { defineComponent as w, ref as B, computed as l, createElementBlock as h, openBlock as o, Fragment as D, createBlock as n, createCommentVNode as r, createVNode as g, unref as s, normalizeStyle as E, normalizeClass as m, withCtx as d, resolveDynamicComponent as G } from "vue";
-import { c } from "../../../../index-DPczIrgX.js";
+import { defineComponent as B, ref as b, computed as n, createElementBlock as D, openBlock as o, Fragment as h, createBlock as l, createCommentVNode as r, createVNode as c, unref as s, normalizeStyle as E, normalizeClass as m, withCtx as g, createTextVNode as G, toDisplayString as x, resolveDynamicComponent as F } from "vue";
+import { c as d } from "../../../../index-DPczIrgX.js";
 import { View as f } from "../../../../baseComp/View/index.js";
-import { MessageType as a, ConversationType as M } from "../../../../types/engine.js";
-import { isCallMessage as F } from "../../../../utils/call.js";
+import { MessageType as a, ConversationType as C } from "../../../../types/engine.js";
+import { isCallMessage as N } from "../../../../utils/call.js";
 import P from "../../../Avatar/Avatar.js";
-import b from "../../ReadReceiptInfo/ReadReceiptInfo.js";
-import x from "../AudioMessage/AudioMessage.js";
-import U from "../CustomMessage/CustomMessage.js";
-import V from "../FaceMessage/FaceMessage.js";
-import H from "../FileMessage/FileMessage.js";
-import { GroupTipMessage as p } from "../GroupTipMessage/index.js";
-import N from "../ImageMessage/ImageMessage.js";
-import S from "../LocationMessage/LocationMessage.js";
-import z from "../MergerMessage/MergerMessage.js";
-import $ from "../RecalledMessage/RecalledMessage.js";
-import X from "../TextMessage/TextMessage.js";
-import j from "../VideoMessage/VideoMessage.js";
-import q from "./MessageBubble/MessageBubble.js";
-import J from "./MessageMeta/MessageMeta.js";
-import { useMessageLayoutClasses as K } from "./useMessageLayoutClasses.js";
-import { _ as Q } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const W = /* @__PURE__ */ w({
+import H from "../../ReadReceiptInfo/ReadReceiptInfo.js";
+import U from "../AudioMessage/AudioMessage.js";
+import V from "../CustomMessage/CustomMessage.js";
+import S from "../FaceMessage/FaceMessage.js";
+import z from "../FileMessage/FileMessage.js";
+import { GroupTipMessage as y } from "../GroupTipMessage/index.js";
+import $ from "../ImageMessage/ImageMessage.js";
+import X from "../LocationMessage/LocationMessage.js";
+import j from "../MergerMessage/MergerMessage.js";
+import q from "../RecalledMessage/RecalledMessage.js";
+import J from "../TextMessage/TextMessage.js";
+import K from "../VideoMessage/VideoMessage.js";
+import Q from "./MessageBubble/MessageBubble.js";
+import W from "./MessageMeta/MessageMeta.js";
+import { useMessageLayoutClasses as Y } from "./useMessageLayoutClasses.js";
+import { _ as Z } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const _ = /* @__PURE__ */ B({
   __name: "MessageLayout",
   props: {
     message: { default: () => ({}) },
+    nick: { default: void 0 },
     isAggregated: { type: Boolean, default: !1 },
     isHiddenMessageAvatar: { type: Boolean, default: !1 },
     isHiddenMessageMeta: { type: Boolean, default: !1 },
+    isHiddenMessageNick: { type: Boolean, default: !1 },
     isFirstInChunk: { type: Boolean, default: void 0 },
     isLastInChunk: { type: Boolean, default: void 0 },
     alignment: { default: "two-sided" },
@@ -35,80 +37,83 @@ const W = /* @__PURE__ */ w({
     style: { default: void 0 }
   },
   setup(e) {
-    const t = e, i = B(!1), C = l(() => !!(t.message.type === a.CUSTOM && t.message.getMessageContent().businessID === "group_create" || t.message.type === a.CUSTOM && F(t.message) && t.message.conversationType === M.GROUP)), y = {
-      [a.TEXT]: X,
-      [a.IMAGE]: N,
-      [a.AUDIO]: x,
-      [a.VIDEO]: j,
-      [a.FILE]: H,
-      [a.FACE]: V,
-      [a.LOCATION]: S,
-      [a.MERGER]: z,
-      [a.CUSTOM]: U,
-      [a.GRP_TIP]: p
-    }, u = l(() => y[t.message.type]), R = l(() => t.message.flow === "out"), {
-      layoutClasses: I,
-      wrapperClasses: v,
-      avatarClasses: A,
-      bubbleClasses: T,
-      metaClasses: O
-    } = K({
+    const t = e, u = b(!1), v = n(() => !!(t.message.type === a.CUSTOM && t.message.getMessageContent().businessID === "group_create" || t.message.type === a.CUSTOM && N(t.message) && t.message.conversationType === C.GROUP)), p = {
+      [a.TEXT]: J,
+      [a.IMAGE]: $,
+      [a.AUDIO]: U,
+      [a.VIDEO]: K,
+      [a.FILE]: z,
+      [a.FACE]: S,
+      [a.LOCATION]: X,
+      [a.MERGER]: j,
+      [a.CUSTOM]: V,
+      [a.GRP_TIP]: y
+    }, M = n(() => p[t.message.type]), R = n(() => t.message.flow === "out"), i = n(() => Y({
       isMessageOwner: R.value,
       alignment: t.alignment,
       isAggregated: t.isAggregated
-    });
-    function k() {
-      i.value = !0;
-    }
+    })), I = n(() => i.value.layoutClasses), k = n(() => i.value.wrapperClasses), T = n(() => i.value.avatarClasses), A = n(() => i.value.bubbleClasses), O = n(() => i.value.metaClasses);
     function L() {
-      i.value = !1;
+      u.value = !0;
+    }
+    function w() {
+      u.value = !1;
     }
-    return (Y, Z) => (o(), h(D, null, [
-      e.message.isRevoked ? (o(), n(s($), {
+    return (ee, se) => (o(), D(h, null, [
+      e.message.isRevoked ? (o(), l(s(q), {
         key: 0,
         class: "message-recalled",
         message: e.message
-      }, null, 8, ["message"])) : e.message.type === s(a).GRP_TIP || C.value ? (o(), n(s(p), {
+      }, null, 8, ["message"])) : e.message.type === s(a).GRP_TIP || v.value ? (o(), l(s(y), {
         key: 1,
         message: e.message
-      }, null, 8, ["message"])) : u.value ? (o(), n(s(f), {
+      }, null, 8, ["message"])) : M.value ? (o(), l(s(f), {
         key: 2,
         "data-message-id": e.message.ID,
-        class: m(s(I)),
+        class: m(I.value),
         style: E(e.style)
       }, {
-        default: d(() => [
-          e.isHiddenMessageAvatar ? r("", !0) : (o(), n(s(P), {
+        default: g(() => [
+          e.isHiddenMessageAvatar ? r("", !0) : (o(), l(s(P), {
             key: 0,
-            class: m(s(c)(s(A))),
+            class: m(s(d)(T.value)),
             src: e.message.avatar
           }, null, 8, ["class", "src"])),
-          g(s(f), {
-            class: m(s(c)(s(v)))
+          c(s(f), {
+            class: m(s(d)(k.value))
           }, {
-            default: d(() => [
-              g(s(q), {
-                class: m(s(T)),
+            default: g(() => [
+              e.isHiddenMessageNick ? r("", !0) : (o(), l(s(f), {
+                key: 0,
+                class: m(s(d)("message-layout__nick"))
+              }, {
+                default: g(() => [
+                  G(x(t.nick || e.message.nameCard || e.message.nick || e.message.from), 1)
+                ]),
+                _: 1
+              }, 8, ["class"])),
+              c(s(Q), {
+                class: m(A.value),
                 message: e.message,
                 alignment: e.alignment,
                 isLastInChunk: !1,
                 messageActionList: e.messageActionList
               }, {
-                default: d(() => [
-                  (o(), n(G(u.value), { message: e.message }, null, 8, ["message"]))
+                default: g(() => [
+                  (o(), l(F(M.value), { message: e.message }, null, 8, ["message"]))
                 ]),
                 _: 1
               }, 8, ["class", "message", "alignment", "messageActionList"]),
-              e.isHiddenMessageMeta ? r("", !0) : (o(), n(s(J), {
-                key: 0,
-                class: m(s(O)),
+              e.isHiddenMessageMeta ? r("", !0) : (o(), l(s(W), {
+                key: 1,
+                class: m(O.value),
                 status: e.message.status,
                 flow: e.message.flow,
                 timestamp: e.message.time * 1e3,
                 "need-read-receipt": e.message.needReadReceipt,
                 "read-receipt-info": e.message.readReceiptInfo,
-                "is-group": e.message.conversationType === s(M).GROUP,
-                onOnReadReceiptTextClick: k
+                "is-group": e.message.conversationType === s(C).GROUP,
+                onOnReadReceiptTextClick: L
               }, null, 8, ["class", "status", "flow", "timestamp", "need-read-receipt", "read-receipt-info", "is-group"]))
             ]),
             _: 1
@@ -116,17 +121,17 @@ const W = /* @__PURE__ */ w({
         ]),
         _: 1
       }, 8, ["data-message-id", "class", "style"])) : r("", !0),
-      g(s(b), {
-        open: i.value,
+      c(s(H), {
+        open: u.value,
         messageID: e.message.ID,
         "read-count": e.message.readReceiptInfo.readCount,
         "unread-count": e.message.readReceiptInfo.unreadCount,
         "is-peer-read": e.message.readReceiptInfo.isPeerRead,
-        onOnClose: L
+        onOnClose: w
       }, null, 8, ["open", "messageID", "read-count", "unread-count", "is-peer-read"])
     ], 64));
   }
-}), ve = /* @__PURE__ */ Q(W, [["__scopeId", "data-v-af693331"]]);
+}), Ae = /* @__PURE__ */ Z(_, [["__scopeId", "data-v-90177209"]]);
 export {
-  ve as default
+  Ae as default
 };

package/dist/components/MessageList/Message/MessageLayout/MessageLayout.vue.d.ts

@@ -3,9 +3,11 @@ import { MessageModel } from '../../../../types/engine';
 
 interface MessageLayoutProps {
     message: MessageModel;
+    nick?: string;
     isAggregated?: boolean;
     isHiddenMessageAvatar?: boolean;
     isHiddenMessageMeta?: boolean;
+    isHiddenMessageNick?: boolean;
     isFirstInChunk?: boolean;
     isLastInChunk?: boolean;
     alignment?: 'left' | 'right' | 'two-sided';
@@ -16,9 +18,11 @@ interface MessageLayoutProps {
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageLayoutProps>, {
     message: () => MessageModel;
     alignment: string;
+    nick: undefined;
     isAggregated: boolean;
     isHiddenMessageAvatar: boolean;
     isHiddenMessageMeta: boolean;
+    isHiddenMessageNick: boolean;
     isFirstInChunk: undefined;
     isLastInChunk: undefined;
     messageActionList: undefined;
@@ -27,9 +31,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MessageLayoutProps>, {
     message: () => MessageModel;
     alignment: string;
+    nick: undefined;
     isAggregated: boolean;
     isHiddenMessageAvatar: boolean;
     isHiddenMessageMeta: boolean;
+    isHiddenMessageNick: boolean;
     isFirstInChunk: undefined;
     isLastInChunk: undefined;
     messageActionList: undefined;
@@ -38,6 +44,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
 }>>> & Readonly<{}>, {
     style: Record<string, any>;
     message: MessageModel;
+    nick: string;
     className: string;
     isLastInChunk: boolean;
     messageActionList: MessageAction[];
@@ -45,6 +52,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     isAggregated: boolean;
     isHiddenMessageAvatar: boolean;
     isHiddenMessageMeta: boolean;
+    isHiddenMessageNick: boolean;
     isFirstInChunk: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/components/MessageList/Message/VideoMessage/VideoMessage.js

@@ -1,83 +1,78 @@
-import { defineComponent as f, ref as d, computed as v, onMounted as _, onUnmounted as H, watch as w, createBlock as R, openBlock as g, unref as i, normalizeStyle as I, normalizeClass as C, withCtx as E, createElementBlock as L, createCommentVNode as x, createElementVNode as z } from "vue";
-import { c as M } from "../../../../index-DPczIrgX.js";
+import { defineComponent as f, computed as i, ref as h, watch as _, createBlock as H, openBlock as v, unref as p, normalizeStyle as E, normalizeClass as C, withCtx as I, createElementBlock as L, createCommentVNode as R, createElementVNode as A } from "vue";
+import { c as T } from "../../../../index-DPczIrgX.js";
 import { View as k } from "../../../../baseComp/View/index.js";
-import { _ as y } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
-const A = {
+import { _ as x } from "../../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const y = {
   key: 0,
   class: "video-placeholder"
-}, T = ["src", "poster"], V = /* @__PURE__ */ f({
+}, w = ["src", "poster"], z = /* @__PURE__ */ f({
   __name: "VideoMessage",
   props: {
     message: { default: () => ({}) },
     isLastInChunk: { type: Boolean, default: !1 }
   },
-  setup(n) {
-    const l = n, e = l.message.getMessageContent(), u = d(!1), t = d(!1), s = d(
-      e.snapshotWidth && e.snapshotHeight ? {
+  setup(l) {
+    const n = l, m = (e, t) => e === 200 && t === 200, c = i(
+      () => n.message.getMessageContent()
+    ), a = h(null), s = h(!1), u = i(() => {
+      if (a.value)
+        return a.value;
+      const e = c.value;
+      return m(e.snapshotWidth, e.snapshotHeight) ? null : e.snapshotWidth && e.snapshotHeight ? {
         height: e.snapshotHeight,
         aspectRatio: e.snapshotWidth / e.snapshotHeight
-      } : null
-    ), r = v(() => l.message.flow === "out"), a = v(() => {
-      if (!s.value)
+      } : null;
+    }), o = i(() => {
+      if (!u.value)
         return {
-          height: 400,
+          height: 200,
           aspectRatio: 0.75
         };
-      const { aspectRatio: c } = s.value;
-      return c > 1 ? {
-        aspectRatio: c,
+      const { aspectRatio: r } = u.value;
+      return r > 1 ? {
+        aspectRatio: r,
         height: 200
       } : {
-        aspectRatio: c,
-        height: 400
+        aspectRatio: r,
+        height: 300
       };
-    }), p = () => {
-      u.value = !0;
-    }, m = (h) => {
-      const o = h.target;
-      s.value = {
-        aspectRatio: o.videoWidth / o.videoHeight,
-        height: o.videoHeight
-      }, t.value = !0;
+    }), d = i(() => n.message.flow === "out"), g = (e) => {
+      const t = e.target;
+      a.value = {
+        aspectRatio: t.videoWidth / t.videoHeight,
+        height: t.videoHeight
+      }, s.value = !0;
     };
-    return _(() => {
-      window.addEventListener("resize", p);
-    }), H(() => {
-      window.removeEventListener("resize", p);
-    }), w(() => l.message.ID, () => {
-      t.value = !1, s.value = e.snapshotWidth && e.snapshotHeight ? {
-        height: e.snapshotHeight,
-        aspectRatio: e.snapshotWidth / e.snapshotHeight
-      } : null;
-    }), (h, o) => (g(), R(i(k), {
-      class: C(i(M)("video-message", {
-        "video-message--last--self": r.value && n.isLastInChunk,
-        "video-message--last--other": !r.value && n.isLastInChunk,
-        "video-message--loaded": t.value
+    return _(() => n.message.ID, () => {
+      s.value = !1, a.value = null;
+    }), (e, t) => (v(), H(p(k), {
+      class: C(p(T)("video-message", {
+        "video-message--last--self": d.value && l.isLastInChunk,
+        "video-message--last--other": !d.value && l.isLastInChunk,
+        "video-message--loaded": s.value
       })),
-      style: I({
-        minHeight: u.value ? "auto" : `${a.value.height}px`,
-        maxHeight: `${a.value.height}px`,
-        aspectRatio: s.value ? `${a.value.aspectRatio}` : "auto",
-        width: t.value ? void 0 : `${a.value.height * a.value.aspectRatio}px`
+      style: E({
+        maxHeight: `${o.value.height}px`,
+        aspectRatio: u.value ? `${o.value.aspectRatio}` : "auto",
+        width: s.value ? void 0 : `${o.value.height * o.value.aspectRatio}px`
       })
     }, {
-      default: E(() => [
-        t.value ? x("", !0) : (g(), L("div", A)),
-        z("video", {
+      default: I(() => [
+        s.value ? R("", !0) : (v(), L("div", y)),
+        A("video", {
           class: "video-message__video",
-          src: i(e).url,
-          poster: i(e).snapshotUrl,
+          src: c.value.url,
+          poster: c.value.snapshotUrl,
           controls: "",
           muted: "",
           autoplay: !1,
-          onLoadedmetadata: m
-        }, null, 40, T)
+          onLoadedmetadata: g
+        }, null, 40, w)
       ]),
       _: 1
     }, 8, ["class", "style"]));
   }
-}), D = /* @__PURE__ */ y(V, [["__scopeId", "data-v-c5688c84"]]);
+}), B = /* @__PURE__ */ x(z, [["__scopeId", "data-v-a02e7d43"]]);
 export {
-  D as default
+  B as default
 };

package/dist/components/MessageList/Message/VideoMessage/VideoMessage.vue.d.ts

@@ -1,17 +1,17 @@
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { MessageModel } from '../../../../types/engine';
 
-interface IVideoMessageProps {
-    message: IMessageModel;
+interface VideoMessageProps {
+    message: MessageModel;
     isLastInChunk?: boolean;
 }
-declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IVideoMessageProps>, {
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoMessageProps>, {
     isLastInChunk: boolean;
-    message: () => IMessageModel;
-}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IVideoMessageProps>, {
+    message: () => MessageModel;
+}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<VideoMessageProps>, {
     isLastInChunk: boolean;
-    message: () => IMessageModel;
+    message: () => MessageModel;
 }>>> & Readonly<{}>, {
-    message: IMessageModel;
+    message: MessageModel;
     isLastInChunk: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -1,19 +1,22 @@
-import { defineComponent as s, createBlock as a, openBlock as i, unref as t } from "vue";
-import n from "./MessageLayout/MessageLayout.js";
+import { defineComponent as s, createBlock as a, openBlock as i, unref as n } from "vue";
+import t from "./MessageLayout/MessageLayout.js";
 const o = /* @__PURE__ */ s({
   __name: "Message",
   props: {
     message: {},
+    nick: { default: void 0 },
     alignment: { default: "two-sided" },
     messageActionList: { default: void 0 },
     isAggregated: { type: Boolean, default: !1 },
     isFirstInChunk: { type: Boolean, default: void 0 },
     isLastInChunk: { type: Boolean, default: void 0 },
     isHiddenMessageAvatar: { type: Boolean, default: !1 },
+    isHiddenMessageNick: { type: Boolean, default: !1 },
     isHiddenMessageMeta: { type: Boolean, default: !1 }
   },
   setup(e) {
-    return (g, d) => (i(), a(t(n), {
+    return (d, g) => (i(), a(n(t), {
+      nick: e.nick,
       message: e.message,
       messageActionList: e.messageActionList,
       alignment: e.alignment,
@@ -21,8 +24,9 @@ const o = /* @__PURE__ */ s({
       "is-first-in-chunk": e.isFirstInChunk,
       "is-last-in-chunk": e.isLastInChunk,
       "is-hidden-message-avatar": e.isHiddenMessageAvatar,
+      "is-hidden-message-nick": e.isHiddenMessageNick,
       "is-hidden-message-meta": e.isHiddenMessageMeta
-    }, null, 8, ["message", "messageActionList", "alignment", "is-aggregated", "is-first-in-chunk", "is-last-in-chunk", "is-hidden-message-avatar", "is-hidden-message-meta"]));
+    }, null, 8, ["nick", "message", "messageActionList", "alignment", "is-aggregated", "is-first-in-chunk", "is-last-in-chunk", "is-hidden-message-avatar", "is-hidden-message-nick", "is-hidden-message-meta"]));
   }
 });
 export {