tuikit-atomicx-vue3 3.4.1 → 4.3.0

package/dist/components/BarrageInput/TextEditor/index.js

@@ -1,9 +1,9 @@
 import { defineComponent as B, ref as g, computed as K, watch as x, nextTick as V, onMounted as w, onUnmounted as L, createElementBlock as n, openBlock as l, normalizeClass as d, unref as r, createElementVNode as h, createCommentVNode as E, renderSlot as I, toDisplayString as M } from "vue";
 import { useUIKit as U, TUIToast as A } from "@tencentcloud/uikit-base-component-vue3";
-import { ERROR_MESSAGE as D } from "../constants.js";
-import { createEditor as N } from "./EditorCore.js";
-import { useConversationListState as $ } from "../../../states/ConversationListState/ConversationListState.js";
-import { useMessageInputState as z } from "../../../states/MessageInputState/MessageInputState.js";
+import { useMessageInputState as D } from "../MessageInputState.js";
+import { ERROR_MESSAGE as N } from "../constants.js";
+import { createEditor as $ } from "./EditorCore.js";
+import { useConversationListState as z } from "../../../states/ConversationListState/ConversationListState.js";
 const G = "_disabled_jp6u3_13", O = "_editor_jp6u3_30", s = {
   "input-wrapper": "_input-wrapper_jp6u3_1",
   disabled: G,
@@ -21,11 +21,11 @@ const G = "_disabled_jp6u3_13", O = "_editor_jp6u3_30", s = {
   },
   emits: ["focus", "blur"],
   setup(R, { emit: S }) {
-    const o = R, c = S, { t: p } = U(), { activeConversation: j } = $(), { inputRawValue: k, updateRawValue: F, sendMessage: T, setEditorInstance: f, setContent: m } = z(), u = g(null), _ = g(o.autoFocus), b = K(() => o.placeholder || p("Say something"));
+    const o = R, c = S, { t: p } = U(), { activeConversation: j } = z(), { inputRawValue: k, updateRawValue: F, sendMessage: T, setEditorInstance: f, setContent: m } = D(), u = g(null), _ = g(o.autoFocus), b = K(() => o.placeholder || p("Say something"));
     let i = null;
     const v = (e) => {
       const t = u.value;
-      !t || e.disabled || t.dataset.editorCreated || (i = N({
+      !t || e.disabled || t.dataset.editorCreated || (i = $({
         element: t,
         placeholder: b.value,
         autoFocus: e.autoFocus,
@@ -40,7 +40,7 @@ const G = "_disabled_jp6u3_13", O = "_editor_jp6u3_30", s = {
             m(""), await T(a);
           } catch (a) {
             A.error({
-              message: p(D[a.code] || "send message failed")
+              message: p(N[a.code] || "send message failed")
             });
           }
         },

package/dist/components/BarrageInput/type.d.ts

@@ -0,0 +1,17 @@
+declare enum MessageContentType {
+    TEXT = "text",
+    EMOJI = "emoji"
+}
+type ContentTypeMap = {
+    [key in MessageContentType]: key extends MessageContentType.TEXT ? string : key extends MessageContentType.EMOJI ? {
+        url: string;
+        key: string;
+        text: string;
+    } : never;
+};
+interface InputContent<T extends MessageContentType = MessageContentType> {
+    type: T;
+    content: ContentTypeMap[T];
+}
+export { MessageContentType, };
+export type { ContentTypeMap, InputContent, };

package/dist/components/BarrageInput/type.js

@@ -0,0 +1,4 @@
+var t = /* @__PURE__ */ ((r) => (r.TEXT = "text", r.EMOJI = "emoji", r))(t || {});
+export {
+  t as MessageContentType
+};

package/dist/components/BarrageInput/utils.d.ts

@@ -0,0 +1,30 @@
+import { MessageContentType, InputContent } from './type';
+
+declare function convertInputContentToEditorNode(item: InputContent): {
+    type: string;
+    text: string | {
+        url: string;
+        key: string;
+        text: string;
+    };
+    attrs?: undefined;
+} | {
+    type: any;
+    attrs: {
+        src: string;
+        alt: string;
+        fileData: File;
+        title: string;
+    };
+    text?: undefined;
+} | {
+    type: MessageContentType;
+    attrs: {
+        src: string;
+        alt: string;
+        title: string;
+        fileData?: undefined;
+    };
+    text?: undefined;
+};
+export { convertInputContentToEditorNode, };

package/dist/components/BarrageInput/utils.js

@@ -0,0 +1,41 @@
+import { MessageContentType as n } from "./type.js";
+function c(e) {
+  switch (e.type) {
+    case n.TEXT:
+      return {
+        type: "text",
+        text: e.content
+      };
+    case n.IMAGE: {
+      const t = e.content, r = URL.createObjectURL(t);
+      return {
+        type: n.IMAGE,
+        attrs: {
+          src: r,
+          alt: t == null ? void 0 : t.name,
+          fileData: t,
+          title: t == null ? void 0 : t.name
+        }
+      };
+    }
+    case n.EMOJI: {
+      const t = e.content;
+      return {
+        type: n.EMOJI,
+        attrs: {
+          src: t.url,
+          alt: t.key,
+          title: t.text
+        }
+      };
+    }
+    default:
+      return {
+        type: "text",
+        text: String(e.content)
+      };
+  }
+}
+export {
+  c as convertInputContentToEditorNode
+};

package/dist/components/BarrageList/BarrageList.js

@@ -1,154 +1,124 @@
-import { defineComponent as q, useSlots as J, ref as i, provide as Q, watch as N, nextTick as $, onMounted as W, onUnmounted as X, createElementBlock as k, openBlock as v, Fragment as z, createElementVNode as m, createVNode as E, createBlock as O, createCommentVNode as T, normalizeStyle as x, unref as s, withCtx as Y, renderList as Z, resolveDynamicComponent as ee, toDisplayString as I } from "vue";
-import te from "../../baseComp/ObserverView/ObserverView.js";
-import { throttle as oe } from "../../utils/lodash.js";
-import { useScroll as le } from "../../hooks/useScroll.js";
-import { Message as se } from "./Message/index.js";
-import re from "./MessageForward/MessageForward.js";
-import { MessageListContextSymbol as ae } from "./MessageListContext.js";
-import { useUIKit as ie } from "@tencentcloud/uikit-base-component-vue3";
+import { defineComponent as K, ref as i, useSlots as j, provide as J, watch as F, nextTick as Q, onMounted as R, onUnmounted as W, createElementBlock as k, openBlock as c, Fragment as H, createElementVNode as h, createBlock as O, createCommentVNode as M, normalizeStyle as C, renderList as X, unref as l, resolveDynamicComponent as Y, toDisplayString as T } from "vue";
+import { useUIKit as Z } from "@tencentcloud/uikit-base-component-vue3";
+import { useScroll as ee } from "../../hooks/useScroll.js";
+import { useLoginState as te } from "../../states/LoginState.js";
+import { throttle as se } from "../../utils/lodash.js";
+import { useBarrageListState as oe } from "./BarrageListState.js";
 import ne from "./ClickAction/UserActionMenu.js";
-import { useLoginState as ue } from "../../states/LoginState.js";
-import { useLiveState as ce } from "../../states/LiveState/index.js";
-import { useBarrageListState as ve } from "../../states/BarrageListState/BarrageListState.js";
-import { _ as me } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const de = { class: "message-chunk" }, fe = {
+import { Message as le } from "./Message/index.js";
+import { MessageListContextSymbol as re } from "./MessageListContext.js";
+import { useLiveListState as ae } from "../../states/LiveListState/LiveListState.js";
+import { _ as ie } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const ue = { class: "message-chunk" }, ce = {
   key: 0,
   class: "empty-message"
-}, pe = {
+}, ve = {
   key: 0,
   class: "message-group-tip"
-}, ge = { class: "message-group-tip-name" }, he = { class: "message-group-tip-action" }, M = 150, ye = /* @__PURE__ */ q({
+}, me = { class: "message-group-tip-name" }, de = { class: "message-group-tip-action" }, b = 150, fe = /* @__PURE__ */ K({
   __name: "BarrageList",
   props: {
-    messageAggregationTime: { default: 5 * 60 },
-    filter: { type: Function, default: void 0 },
     Message: { default: void 0 },
-    MessageTimeDivider: { default: void 0 },
-    LocalNoticeMessage: { default: void 0 },
     containerStyle: {},
     itemStyle: {},
     height: {},
     style: {}
   },
-  setup(U) {
-    const { t: C } = ie(), d = U, V = J(), { loginUserInfo: B } = ue(), { currentLive: P } = ce(), c = i({}), L = i(!1), H = i({}), b = i(null), G = (o) => {
-      if (!e.value)
+  setup(P) {
+    const { t: I } = Z(), v = P, o = i(null), V = j(), { loginUserInfo: L } = te(), { currentLive: A } = ae(), u = i(), x = i(!1), $ = i({}), N = i(null), B = i(!1), y = i(!1), _ = i(0), { messageList: m, messageGroupTip: d } = oe(), { scrollToBottom: U } = ee(), G = (e) => {
+      if (!o.value)
         return {
           position: "fixed",
-          top: `${o.bottom + 5}px`,
-          left: `${o.left}px`,
+          top: `${e.bottom + 5}px`,
+          left: `${e.left}px`,
           zIndex: 1e3
         };
-      const t = e.value.getBoundingClientRect(), l = 120, r = 10, n = 5;
-      let a = o.bottom + n;
-      return a + l > t.bottom - r && (a = o.top - l - n), a < t.top + r && (a = t.top + r), {
+      const t = o.value.getBoundingClientRect(), s = 120, n = 10, a = 5;
+      let r = e.bottom + a;
+      return r + s > t.bottom - n && (r = e.top - s - a), r < t.top + n && (r = t.top + n), {
         position: "fixed",
-        top: `${a}px`,
-        left: `${o.left}px`,
+        top: `${r}px`,
+        left: `${e.left}px`,
         zIndex: 1e3
       };
     };
-    Q(ae, {
+    J(re, {
       slots: V,
-      nickClick: (o) => {
-        var p, u, F;
-        const { message: t, event: l } = o, r = ((p = B.value) == null ? void 0 : p.userId) === ((u = P.value) == null ? void 0 : u.liveOwner.userId), n = ((F = B.value) == null ? void 0 : F.userId) === t.from;
-        if (!r || n)
+      nickClick: (e) => {
+        var f, p, g;
+        const { message: t, event: s } = e, n = ((f = L.value) == null ? void 0 : f.userId) === ((p = A.value) == null ? void 0 : p.liveOwner.userId), a = ((g = L.value) == null ? void 0 : g.userId) === t.sender.userId;
+        if (!n || a)
           return;
-        c.value = t, b.value = l.currentTarget;
-        const a = l.currentTarget.getBoundingClientRect();
-        H.value = G(a), L.value = !0;
+        u.value = t, N.value = s.currentTarget;
+        const r = s.currentTarget.getBoundingClientRect();
+        $.value = G(r), x.value = !0;
       }
     });
-    const g = i(!1), h = i(!1), y = i(0), S = i(!1), e = i(null), { messageGroupTip: f, messageList: _, loadMoreMessage: K, currentConversationID: R } = ve(), { scrollToBottom: A } = le(), D = oe(() => {
-      e.value && (y.value = e.value.scrollHeight - e.value.scrollTop - e.value.clientHeight, y.value > M && (h.value = !0), y.value < M && (h.value = !1));
-    }, 100), w = async () => {
-      g.value = !1, h.value = !1;
-    }, j = async () => {
-      var t;
-      if (!g.value || S.value || !((t = _.value) != null && t.length))
-        return;
-      if (S.value = !0, !e.value) {
-        S.value = !1;
-        return;
-      }
-      const o = e.value.scrollHeight - e.value.scrollTop - e.value.clientHeight;
-      if (await K(), await $(), e.value) {
-        const l = e.value.scrollHeight - e.value.clientHeight - o;
-        e.value.scrollTop = Math.max(
-          0,
-          Math.min(e.value.scrollHeight - e.value.clientHeight, l)
-        );
-      }
-      S.value = !1;
+    const z = se(() => {
+      o.value && (_.value = o.value.scrollHeight - o.value.scrollTop - o.value.clientHeight, _.value > b && (y.value = !0), _.value < b && (y.value = !1));
+    }, 100), E = async () => {
+      B.value = !1, y.value = !1;
     };
-    return N(R, () => {
-      w();
-    }), N(_, (o, t) => {
-      if (t === void 0 && o && !g.value && $(() => {
-        A({ behavior: "instant" }), g.value = !0;
-      }), !t || !o || !o.length)
-        return;
-      const l = o[o.length - 1], r = t[t.length - 1];
-      (l == null ? void 0 : l.ID) !== (r == null ? void 0 : r.ID) && (l.flow === "out" || !h.value && y.value < M) && A({ behavior: "smooth" });
+    return F(() => {
+      var e;
+      return (e = A.value) == null ? void 0 : e.liveId;
+    }, () => {
+      E();
+    }), F(() => {
+      var e;
+      return (e = m.value) == null ? void 0 : e.length;
+    }, (e) => {
+      var n;
+      const t = m.value[e - 1], s = m.value[e - 2];
+      s === void 0 && t && !B.value && Q(() => {
+        U({ behavior: "instant" }), B.value = !0;
+      }), !(!s || !t || !e) && (t == null ? void 0 : t.sequence) !== (s == null ? void 0 : s.sequence) && (t.sender.userId === ((n = L.value) == null ? void 0 : n.userId) || !y.value && _.value < b) && U({ behavior: "smooth" });
+    }), R(() => {
+      o.value && o.value.addEventListener("scroll", z), E();
     }), W(() => {
-      e.value && e.value.addEventListener("scroll", D), w();
-    }), X(() => {
-      e.value && e.value.removeEventListener("scroll", D);
-    }), (o, t) => {
-      var l, r, n, a, p;
-      return v(), k(z, null, [
-        m("div", {
+      o.value && o.value.removeEventListener("scroll", z);
+    }), (e, t) => {
+      var s, n, a, r, f, p, g, q, w, D;
+      return c(), k(H, null, [
+        h("div", {
           class: "message-list",
-          style: x({ height: d.height, ...d.style })
+          style: C({ height: v.height, ...v.style })
         }, [
-          m("div", {
+          h("div", {
             id: "messageScrollList",
             ref_key: "scrollContainer",
-            ref: e,
+            ref: o,
             class: "message-list-container",
-            style: x(d.containerStyle)
+            style: C(v.containerStyle)
           }, [
-            E(s(te), {
-              root: "#messageScrollList",
-              rootMargin: "50px 0px 0px 0px",
-              threshold: 0.1,
-              onOnShow: j
-            }, {
-              default: Y(() => [...t[1] || (t[1] = [
-                m("div", { id: "loadMore" }, null, -1)
-              ])]),
-              _: 1
-            }),
-            m("div", de, [
-              (v(!0), k(z, null, Z(s(_), (u) => (v(), O(ee(d.Message || s(se)), {
-                key: u.ID + u.isRevoked + u.status,
-                style: x(d.itemStyle),
-                message: u,
+            h("div", ue, [
+              (c(!0), k(H, null, X(l(m), (S) => (c(), O(Y(v.Message || l(le)), {
+                key: S.sequence + S.timestampInSecond,
+                style: C(v.itemStyle),
+                message: S,
                 "is-last-in-chunk": !0
               }, null, 8, ["style", "message"]))), 128))
             ]),
-            (l = s(_)) != null && l.length ? T("", !0) : (v(), k("div", fe, I(s(C)("No message yet")), 1))
+            (s = l(m)) != null && s.length ? M("", !0) : (c(), k("div", ce, T(l(I)("No message yet")), 1))
           ], 4),
-          s(f) ? (v(), k("div", pe, [
-            m("div", ge, I(((r = s(f)) == null ? void 0 : r.nameCard) || ((n = s(f)) == null ? void 0 : n.userName) || ((a = s(f)) == null ? void 0 : a.userId)), 1),
-            m("div", he, I(((p = s(f)) == null ? void 0 : p.displayAction) === "enter" ? s(C)("Come in") : s(C)("Leave")), 1)
-          ])) : T("", !0)
+          l(d) ? (c(), k("div", ve, [
+            h("div", me, T(((n = l(d)) == null ? void 0 : n.nameCard) || ((a = l(d)) == null ? void 0 : a.userName) || ((r = l(d)) == null ? void 0 : r.userId)), 1),
+            h("div", de, T(((f = l(d)) == null ? void 0 : f.displayAction) === "enter" ? l(I)("Come in") : l(I)("Leave")), 1)
+          ])) : M("", !0)
         ], 4),
-        E(s(re)),
-        L.value ? (v(), O(ne, {
+        x.value && u.value ? (c(), O(ne, {
           key: 0,
-          "user-id": c.value.from,
-          "user-name": c.value.nameCard || c.value.nick || c.value.from,
-          "avatar-url": c.value.avatar,
-          style: x(H.value),
-          "click-target": b.value,
-          onClose: t[0] || (t[0] = (u) => L.value = !1)
-        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : T("", !0)
+          "user-id": (p = u.value) == null ? void 0 : p.sender.userId,
+          "user-name": ((g = u.value) == null ? void 0 : g.sender.nameCard) || ((q = u.value) == null ? void 0 : q.sender.userName) || ((w = u.value) == null ? void 0 : w.sender.userId),
+          "avatar-url": (D = u.value) == null ? void 0 : D.sender.avatarUrl,
+          style: C($.value),
+          "click-target": N.value,
+          onClose: t[0] || (t[0] = (S) => x.value = !1)
+        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : M("", !0)
       ], 64);
     };
   }
-}), De = /* @__PURE__ */ me(ye, [["__scopeId", "data-v-022ab526"]]);
+}), Be = /* @__PURE__ */ ie(fe, [["__scopeId", "data-v-5b9fdfa7"]]);
 export {
-  De as default
+  Be as default
 };

package/dist/components/BarrageList/BarrageList.vue.d.ts

@@ -1,47 +1,18 @@
 import { Component, CSSProperties } from 'vue';
-import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
 
 interface IMessageListProps {
-    /** message actions e.g. recall, delete, etc. */
-    /** max time between message group */
-    messageAggregationTime?: number | undefined;
-    /** custom filter function */
-    filter?: ((message: IMessageModel) => boolean) | undefined;
-    /** custom message component */
     Message?: Component | undefined;
-    /** custom message timeline component */
-    MessageTimeDivider?: Component | undefined;
-    /** custom local notification message component */
-    LocalNoticeMessage?: Component | undefined;
     containerStyle?: CSSProperties | undefined;
     itemStyle?: CSSProperties | undefined;
     height?: string;
     style?: CSSProperties;
 }
 declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
-    /** props */
-    filter: undefined;
-    enableReadReceipt: boolean;
-    messageAggregationTime: number;
-    /** custom components */
     Message: undefined;
-    MessageTimeDivider: undefined;
-    LocalNoticeMessage: undefined;
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<IMessageListProps>, {
-    /** props */
-    filter: undefined;
-    enableReadReceipt: boolean;
-    messageAggregationTime: number;
-    /** custom components */
     Message: undefined;
-    MessageTimeDivider: undefined;
-    LocalNoticeMessage: undefined;
 }>>> & Readonly<{}>, {
-    filter: (message: IMessageModel) => boolean;
     Message: Component;
-    messageAggregationTime: number;
-    MessageTimeDivider: Component;
-    LocalNoticeMessage: Component;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;