tuikit-atomicx-vue3 3.3.4 → 3.4.1

package/dist/components/BarrageInput/index.js

@@ -1,13 +1,13 @@
-import BarrageInputPC from "./BarrageInput.js";
-import BarrageInputH5 from "./BarrageInputH5.js";
-import { addI18n } from "../../i18n/index.js";
-import { resource } from "./i18n/en-US/index.js";
-import { resource as resource$1 } from "./i18n/zh-CN/index.js";
-import { isMobile } from "../../utils/environment.js";
-addI18n("en-US", { translation: resource });
-addI18n("zh-CN", { translation: resource$1 });
-const BarrageInput = isMobile ? BarrageInputH5 : BarrageInputPC;
+import o from "./BarrageInput.js";
+import t from "./BarrageInputH5.js";
+import { addI18n as r } from "../../i18n/index.js";
+import { resource as a } from "./i18n/en-US/index.js";
+import { resource as e } from "./i18n/zh-CN/index.js";
+import { isMobile as m } from "../../utils/environment.js";
+r("en-US", { translation: a });
+r("zh-CN", { translation: e });
+const c = m ? t : o;
 export {
-  BarrageInput,
-  BarrageInputH5
+  c as BarrageInput,
+  t as BarrageInputH5
 };

package/dist/components/BarrageList/BarrageList.js

@@ -1,29 +1,23 @@
-import { defineComponent, useSlots, ref, provide, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, Fragment, createElementVNode, createVNode, createBlock, createCommentVNode, normalizeStyle, unref, withCtx, renderList, resolveDynamicComponent, toDisplayString } from "vue";
-import ObserverView from "../../baseComp/ObserverView/ObserverView.js";
-import { throttle } from "../../utils/lodash.js";
-import { useScroll } from "../../hooks/useScroll.js";
-import { Message as _sfc_main$1 } from "./Message/index.js";
-import MessageForward from "./MessageForward/MessageForward.js";
-import { MessageListContextSymbol } from "./MessageListContext.js";
-import { useUIKit } from "@tencentcloud/uikit-base-component-vue3";
-import UserActionMenu from "./ClickAction/UserActionMenu.js";
-import { useLoginState } from "../../states/LoginState.js";
-import { useLiveState } from "../../states/LiveState/index.js";
-import { useBarrageListState } from "../../states/BarrageListState/BarrageListState.js";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "message-chunk" };
-const _hoisted_2 = {
+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 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 = {
   key: 0,
   class: "empty-message"
-};
-const _hoisted_3 = {
+}, pe = {
   key: 0,
   class: "message-group-tip"
-};
-const _hoisted_4 = { class: "message-group-tip-name" };
-const _hoisted_5 = { class: "message-group-tip-action" };
-const autoScrollThreshold = 150;
-const _sfc_main = /* @__PURE__ */ defineComponent({
+}, ge = { class: "message-group-tip-name" }, he = { class: "message-group-tip-action" }, M = 150, ye = /* @__PURE__ */ q({
   __name: "BarrageList",
   props: {
     messageAggregationTime: { default: 5 * 60 },
@@ -36,195 +30,125 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     height: {},
     style: {}
   },
-  setup(__props) {
-    const { t } = useUIKit();
-    const props = __props;
-    const slots = useSlots();
-    const { loginUserInfo } = useLoginState();
-    const { currentLive } = useLiveState();
-    const currentMessage = ref({});
-    const showActionMenu = ref(false);
-    const actionMenuStyle = ref({});
-    const nickClickTarget = ref(null);
-    const calculateActionMenuPosition = (targetRect) => {
-      if (!scrollContainer.value) {
+  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)
         return {
           position: "fixed",
-          top: `${targetRect.bottom + 5}px`,
-          left: `${targetRect.left}px`,
+          top: `${o.bottom + 5}px`,
+          left: `${o.left}px`,
           zIndex: 1e3
         };
-      }
-      const scrollContainerRect = scrollContainer.value.getBoundingClientRect();
-      const menuHeight = 120;
-      const padding = 10;
-      const gap = 5;
-      let top = targetRect.bottom + gap;
-      if (top + menuHeight > scrollContainerRect.bottom - padding) {
-        top = targetRect.top - menuHeight - gap;
-      }
-      if (top < scrollContainerRect.top + padding) {
-        top = scrollContainerRect.top + padding;
-      }
-      return {
+      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), {
         position: "fixed",
-        top: `${top}px`,
-        left: `${targetRect.left}px`,
+        top: `${a}px`,
+        left: `${o.left}px`,
         zIndex: 1e3
       };
     };
-    provide(MessageListContextSymbol, {
-      slots,
-      nickClick: (payload) => {
-        var _a, _b, _c;
-        const { message, event } = payload;
-        const isOwner = ((_a = loginUserInfo.value) == null ? void 0 : _a.userId) === ((_b = currentLive.value) == null ? void 0 : _b.liveOwner.userId);
-        const isMe = ((_c = loginUserInfo.value) == null ? void 0 : _c.userId) === message.from;
-        if (!isOwner || isMe) {
+    Q(ae, {
+      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)
           return;
-        }
-        currentMessage.value = message;
-        nickClickTarget.value = event.currentTarget;
-        const rect = event.currentTarget.getBoundingClientRect();
-        actionMenuStyle.value = calculateActionMenuPosition(rect);
-        showActionMenu.value = true;
+        c.value = t, b.value = l.currentTarget;
+        const a = l.currentTarget.getBoundingClientRect();
+        H.value = G(a), L.value = !0;
       }
     });
-    const isFinishFirstRender = ref(false);
-    const isDisableAutoScroll = ref(false);
-    const distanceToBottom = ref(0);
-    const isLoadingHistory = ref(false);
-    const scrollContainer = ref(null);
-    const { messageGroupTip, messageList, loadMoreMessage, currentConversationID } = useBarrageListState();
-    const { scrollToBottom } = useScroll();
-    const handleScroll = throttle(() => {
-      if (!scrollContainer.value) {
-        return;
-      }
-      distanceToBottom.value = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
-      if (distanceToBottom.value > autoScrollThreshold) {
-        isDisableAutoScroll.value = true;
-      }
-      if (distanceToBottom.value < autoScrollThreshold) {
-        isDisableAutoScroll.value = false;
-      }
-    }, 100);
-    const initializeMessageList = async () => {
-      isFinishFirstRender.value = false;
-      isDisableAutoScroll.value = false;
-    };
-    const loadMoreHistory = async () => {
-      var _a;
-      if (!isFinishFirstRender.value || isLoadingHistory.value || !((_a = messageList.value) == null ? void 0 : _a.length)) {
+    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;
-      }
-      isLoadingHistory.value = true;
-      if (!scrollContainer.value) {
-        isLoadingHistory.value = false;
+      if (S.value = !0, !e.value) {
+        S.value = !1;
         return;
       }
-      const distanceFromBottom = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
-      await loadMoreMessage();
-      await nextTick();
-      if (scrollContainer.value) {
-        const newScrollTop = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight - distanceFromBottom;
-        scrollContainer.value.scrollTop = Math.max(
+      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(scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight, newScrollTop)
+          Math.min(e.value.scrollHeight - e.value.clientHeight, l)
         );
       }
-      isLoadingHistory.value = false;
+      S.value = !1;
     };
-    watch(currentConversationID, () => {
-      initializeMessageList();
-    });
-    watch(messageList, (newMessages, oldMessages) => {
-      if (oldMessages === void 0 && newMessages && !isFinishFirstRender.value) {
-        nextTick(() => {
-          scrollToBottom({ behavior: "instant" });
-          isFinishFirstRender.value = true;
-        });
-      }
-      if (!oldMessages || !newMessages || !newMessages.length) {
+    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 newLastMessage = newMessages[newMessages.length - 1];
-      const oldLastMessage = oldMessages[oldMessages.length - 1];
-      if ((newLastMessage == null ? void 0 : newLastMessage.ID) !== (oldLastMessage == null ? void 0 : oldLastMessage.ID)) {
-        const shouldAutoScroll = newLastMessage.flow === "out" || !isDisableAutoScroll.value && distanceToBottom.value < autoScrollThreshold;
-        if (shouldAutoScroll) {
-          scrollToBottom({ behavior: "smooth" });
-        }
-      }
-    });
-    onMounted(() => {
-      if (scrollContainer.value) {
-        scrollContainer.value.addEventListener("scroll", handleScroll);
-      }
-      initializeMessageList();
-    });
-    onUnmounted(() => {
-      if (scrollContainer.value) {
-        scrollContainer.value.removeEventListener("scroll", handleScroll);
-      }
-    });
-    return (_ctx, _cache) => {
-      var _a, _b, _c, _d, _e;
-      return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("div", {
+      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" });
+    }), 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", {
           class: "message-list",
-          style: normalizeStyle({ height: props.height, ...props.style })
+          style: x({ height: d.height, ...d.style })
         }, [
-          createElementVNode("div", {
+          m("div", {
             id: "messageScrollList",
             ref_key: "scrollContainer",
-            ref: scrollContainer,
+            ref: e,
             class: "message-list-container",
-            style: normalizeStyle(props.containerStyle)
+            style: x(d.containerStyle)
           }, [
-            createVNode(unref(ObserverView), {
+            E(s(te), {
               root: "#messageScrollList",
               rootMargin: "50px 0px 0px 0px",
               threshold: 0.1,
-              onOnShow: loadMoreHistory
+              onOnShow: j
             }, {
-              default: withCtx(() => [..._cache[1] || (_cache[1] = [
-                createElementVNode("div", { id: "loadMore" }, null, -1)
+              default: Y(() => [...t[1] || (t[1] = [
+                m("div", { id: "loadMore" }, null, -1)
               ])]),
               _: 1
             }),
-            createElementVNode("div", _hoisted_1, [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(messageList), (message) => {
-                return openBlock(), createBlock(resolveDynamicComponent(props.Message || unref(_sfc_main$1)), {
-                  key: message.ID + message.isRevoked + message.status,
-                  style: normalizeStyle(props.itemStyle),
-                  message,
-                  "is-last-in-chunk": true
-                }, null, 8, ["style", "message"]);
-              }), 128))
+            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,
+                "is-last-in-chunk": !0
+              }, null, 8, ["style", "message"]))), 128))
             ]),
-            !((_a = unref(messageList)) == null ? void 0 : _a.length) ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(unref(t)("No message yet")), 1)) : createCommentVNode("", true)
+            (l = s(_)) != null && l.length ? T("", !0) : (v(), k("div", fe, I(s(C)("No message yet")), 1))
           ], 4),
-          unref(messageGroupTip) ? (openBlock(), createElementBlock("div", _hoisted_3, [
-            createElementVNode("div", _hoisted_4, toDisplayString(((_b = unref(messageGroupTip)) == null ? void 0 : _b.nameCard) || ((_c = unref(messageGroupTip)) == null ? void 0 : _c.userName) || ((_d = unref(messageGroupTip)) == null ? void 0 : _d.userId)), 1),
-            createElementVNode("div", _hoisted_5, toDisplayString(((_e = unref(messageGroupTip)) == null ? void 0 : _e.displayAction) === "enter" ? unref(t)("Come in") : unref(t)("Leave")), 1)
-          ])) : createCommentVNode("", true)
+          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)
         ], 4),
-        createVNode(unref(MessageForward)),
-        showActionMenu.value ? (openBlock(), createBlock(UserActionMenu, {
+        E(s(re)),
+        L.value ? (v(), O(ne, {
           key: 0,
-          "user-id": currentMessage.value.from,
-          "user-name": currentMessage.value.nameCard || currentMessage.value.nick || currentMessage.value.from,
-          "avatar-url": currentMessage.value.avatar,
-          style: normalizeStyle(actionMenuStyle.value),
-          "click-target": nickClickTarget.value,
-          onClose: _cache[0] || (_cache[0] = ($event) => showActionMenu.value = false)
-        }, null, 8, ["user-id", "user-name", "avatar-url", "style", "click-target"])) : createCommentVNode("", true)
+          "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)
       ], 64);
     };
   }
-});
-const BarrageListPC = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-022ab526"]]);
+}), De = /* @__PURE__ */ me(ye, [["__scopeId", "data-v-022ab526"]]);
 export {
-  BarrageListPC as default
+  De as default
 };