tuikit-atomicx-vue3 3.3.4 → 3.4.1

package/dist/components/MessageList/MessageList.js

@@ -1,226 +1,151 @@
-import { defineComponent, useSlots, provide, ref, computed, watch, nextTick, onMounted, onUnmounted, createElementBlock, openBlock, createElementVNode, createVNode, createBlock, createCommentVNode, unref, withCtx, Fragment, renderList, normalizeClass, resolveDynamicComponent } from "vue";
-import { c as cs } from "../../index-BF6QB9jF.js";
-import ObserverView from "../../baseComp/ObserverView/ObserverView.js";
-import { View as _sfc_main$1 } from "../../baseComp/View/index.js";
-import { useScroll } from "../../hooks/useScroll.js";
-import { throttle } from "../../utils/lodash.js";
-import { Message as _sfc_main$2 } from "./Message/index.js";
-import MessageForward from "./MessageForward/MessageForward.js";
-import { MessageListContextSymbol } from "./MessageListContext.js";
-import DefaultMessageTimeDivider from "./MessageTimeDivider/MessageTimeDivider.js";
-import ScrollToBottom from "./ScrollToBottom/ScrollToBottom.js";
-import { useMessageListState } from "../../states/MessageListState/MessageListState.js";
-import { _ as _export_sfc } from "../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _hoisted_1 = { class: "message-list" };
-const _hoisted_2 = { class: "message-chunk" };
-const autoScrollThreshold = 150;
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as j, useSlots as q, provide as J, ref as m, computed as R, watch as A, nextTick as w, onMounted as K, onUnmounted as Q, createElementBlock as C, openBlock as u, createElementVNode as S, createVNode as N, createBlock as k, createCommentVNode as Y, unref as i, withCtx as V, Fragment as F, renderList as $, normalizeClass as x, resolveDynamicComponent as O } from "vue";
+import { c as I } from "../../index-DPczIrgX.js";
+import Z from "../../baseComp/ObserverView/ObserverView.js";
+import { View as ee } from "../../baseComp/View/index.js";
+import { useScroll as te } from "../../hooks/useScroll.js";
+import { throttle as se } from "../../utils/lodash.js";
+import { Message as oe } from "./Message/index.js";
+import le from "./MessageForward/MessageForward.js";
+import { MessageListContextSymbol as ae } from "./MessageListContext.js";
+import ie from "./MessageTimeDivider/MessageTimeDivider.js";
+import re from "./ScrollToBottom/ScrollToBottom.js";
+import { useMessageListState as ne } from "../../states/MessageListState/MessageListState.js";
+import { _ as ue } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const ce = { class: "message-list" }, me = { class: "message-chunk" }, y = 150, ge = /* @__PURE__ */ j({
   __name: "MessageList",
   props: {
     alignment: { default: "two-sided" },
     messageAggregationTime: { default: 5 * 60 },
-    enableReadReceipt: { type: Boolean, default: false },
+    enableReadReceipt: { type: Boolean, default: !1 },
     messageActionList: { default: void 0 },
     filter: { type: Function, default: void 0 },
     Message: { default: void 0 },
     MessageTimeDivider: { default: void 0 }
   },
-  setup(__props) {
-    const props = __props;
-    const slots = useSlots();
-    provide(MessageListContextSymbol, { slots });
-    const isFinishFirstRender = ref(false);
-    const distanceToBottom = ref(0);
-    const isLoadingHistory = ref(false);
-    const scrollContainer = ref(null);
-    const isScrollToBottomVisible = ref(false);
-    const storeDistanceToBottom = ref(0);
-    const {
-      messageList,
-      loadMoreOlderMessage,
-      activeConversationID,
-      isDisableScroll,
-      setIsDisableScroll,
-      setEnableReadReceipt
-    } = useMessageListState();
-    const { scrollToBottom } = useScroll();
-    const enableMessageAggregation = computed(() => props.messageAggregationTime && props.messageAggregationTime > 0);
-    const messageChunks = computed(() => {
-      if (!messageList.value) {
+  setup(B) {
+    const a = B, z = q();
+    J(ae, { slots: z });
+    const v = m(!1), f = m(0), d = m(!1), t = m(null), h = m(!1), D = m(0), {
+      messageList: g,
+      loadMoreOlderMessage: G,
+      activeConversationID: U,
+      isDisableScroll: P,
+      setIsDisableScroll: p,
+      setEnableReadReceipt: W
+    } = ne(), { scrollToBottom: _ } = te(), M = R(() => a.messageAggregationTime && a.messageAggregationTime > 0), L = R(() => {
+      if (!g.value)
         return [];
-      }
-      const filteredMessageList = props.filter ? messageList.value.filter(props.filter) : messageList.value.filter((message) => !message.isDeleted);
-      if (!props.messageAggregationTime || props.messageAggregationTime <= 0) {
-        return filteredMessageList.map((message) => ({
-          timestamp: message.time,
-          messages: [message],
-          key: `chunk-${message.ID}`
+      const l = a.filter ? g.value.filter(a.filter) : g.value.filter((e) => !e.isDeleted);
+      if (!a.messageAggregationTime || a.messageAggregationTime <= 0)
+        return l.map((e) => ({
+          timestamp: e.time,
+          messages: [e],
+          key: `chunk-${e.ID}`
         }));
-      }
-      const chunks = [];
-      const MAX_TIME_BETWEEN_MESSAGE_GROUP = props.messageAggregationTime;
-      filteredMessageList.forEach((message, index, messages) => {
-        const messageTime = message.time;
-        const lastChunk = chunks.length > 0 ? chunks[chunks.length - 1] : void 0;
-        const lastMessage = index > 0 ? messages[index - 1] : void 0;
-        const shouldCreateNewChunk = !lastChunk || messageTime - lastChunk.timestamp > MAX_TIME_BETWEEN_MESSAGE_GROUP || lastChunk.messages[0].from !== message.from || message.isRevoked || lastMessage && lastMessage.isRevoked || message.status === "fail" || lastMessage && lastMessage.status === "fail" || message.hasRiskContent || lastMessage && lastMessage.hasRiskContent;
-        if (shouldCreateNewChunk) {
-          chunks.push({
-            timestamp: messageTime,
-            messages: [message],
-            key: `chunk-${message.ID}`
-          });
-        } else {
-          lastChunk.messages.push(message);
+      const s = [], o = a.messageAggregationTime;
+      return l.forEach((e, n, r) => {
+        const E = e.time, T = s.length > 0 ? s[s.length - 1] : void 0, c = n > 0 ? r[n - 1] : void 0;
+        !T || E - T.timestamp > o || T.messages[0].from !== e.from || e.isRevoked || c && c.isRevoked || e.status === "fail" || c && c.status === "fail" || e.hasRiskContent || c && c.hasRiskContent ? s.push({
+          timestamp: E,
+          messages: [e],
+          key: `chunk-${e.ID}`
+        }) : T.messages.push(e);
+      }), s;
+    }), b = se(() => {
+      t.value && (f.value = t.value.scrollHeight - t.value.scrollTop - t.value.clientHeight, f.value > y && (p(!0), h.value = !0), f.value < y && (p(!1), h.value = !1));
+    }, 100), H = async () => {
+      v.value = !1, p(!1), h.value = !1;
+    }, X = async () => {
+      var l;
+      if (!(!v.value || d.value || !((l = g.value) != null && l.length))) {
+        if (p(!0), d.value = !0, !t.value) {
+          d.value = !1;
+          return;
         }
-      });
-      return chunks;
-    });
-    const handleScroll = throttle(() => {
-      if (!scrollContainer.value) {
-        return;
-      }
-      distanceToBottom.value = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
-      if (distanceToBottom.value > autoScrollThreshold) {
-        setIsDisableScroll(true);
-        isScrollToBottomVisible.value = true;
-      }
-      if (distanceToBottom.value < autoScrollThreshold) {
-        setIsDisableScroll(false);
-        isScrollToBottomVisible.value = false;
-      }
-    }, 100);
-    const initializeMessageList = async () => {
-      isFinishFirstRender.value = false;
-      setIsDisableScroll(false);
-      isScrollToBottomVisible.value = false;
-    };
-    const loadMoreHistory = async () => {
-      var _a;
-      if (!isFinishFirstRender.value || isLoadingHistory.value || !((_a = messageList.value) == null ? void 0 : _a.length)) {
-        return;
-      }
-      setIsDisableScroll(true);
-      isLoadingHistory.value = true;
-      if (!scrollContainer.value) {
-        isLoadingHistory.value = false;
-        return;
-      }
-      storeDistanceToBottom.value = scrollContainer.value.scrollHeight - scrollContainer.value.scrollTop - scrollContainer.value.clientHeight;
-      await loadMoreOlderMessage();
-      await nextTick();
-      if (scrollContainer.value) {
-        const newScrollTop = scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight - storeDistanceToBottom.value;
-        scrollContainer.value.scrollTop = Math.max(0, Math.min(
-          scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight,
-          newScrollTop
-        ));
+        if (D.value = t.value.scrollHeight - t.value.scrollTop - t.value.clientHeight, await G(), await w(), t.value) {
+          const s = t.value.scrollHeight - t.value.clientHeight - D.value;
+          t.value.scrollTop = Math.max(0, Math.min(
+            t.value.scrollHeight - t.value.clientHeight,
+            s
+          ));
+        }
+        d.value = !1;
       }
-      isLoadingHistory.value = false;
     };
-    watch(activeConversationID, () => {
-      initializeMessageList();
-    });
-    watch(messageList, (newMessages, oldMessages) => {
-      if (oldMessages === void 0 && newMessages && !isFinishFirstRender.value) {
-        nextTick(() => {
-          scrollToBottom({ behavior: "instant" });
-          isFinishFirstRender.value = true;
+    return A(U, () => {
+      H();
+    }), A(g, (l, s) => {
+      if (s === void 0 && l && !v.value) {
+        w(() => {
+          _({ behavior: "instant" }), v.value = !0;
         });
         return;
       }
-      if (!oldMessages || !newMessages || !newMessages.length) {
+      if (!s || !l || !l.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" || !isDisableScroll.value && distanceToBottom.value < autoScrollThreshold;
-        if (shouldAutoScroll) {
-          scrollToBottom({ behavior: "smooth" });
-        }
-      }
-    });
-    watch(() => props.enableReadReceipt, (newEnableReadReceipt) => {
-      setEnableReadReceipt(newEnableReadReceipt);
+      const o = l[l.length - 1], e = s[s.length - 1];
+      (o == null ? void 0 : o.ID) !== (e == null ? void 0 : e.ID) && (o.flow === "out" || !P.value && f.value < y) && _({ behavior: "smooth" });
+    }), A(() => a.enableReadReceipt, (l) => {
+      W(l);
     }, {
-      immediate: true
-    });
-    onMounted(() => {
-      if (scrollContainer.value) {
-        scrollContainer.value.addEventListener("scroll", handleScroll);
-      }
-      initializeMessageList();
-    });
-    onUnmounted(() => {
-      if (scrollContainer.value) {
-        scrollContainer.value.removeEventListener("scroll", handleScroll);
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", {
-          id: "messageScrollList",
-          ref_key: "scrollContainer",
-          ref: scrollContainer,
-          class: "message-list-container"
-        }, [
-          createVNode(unref(ObserverView), {
-            root: "#messageScrollList",
-            rootMargin: "50px 0px 0px 0px",
-            threshold: 0.1,
-            onOnShow: loadMoreHistory
-          }, {
-            default: withCtx(() => [..._cache[1] || (_cache[1] = [
-              createElementVNode("div", { id: "loadMore" }, null, -1)
-            ])]),
-            _: 1
-          }),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(messageChunks.value, (chunk, chunkIndex) => {
-            return openBlock(), createBlock(unref(_sfc_main$1), {
-              key: chunk.key,
-              class: normalizeClass(unref(cs)("message-chunk--container"))
-            }, {
-              default: withCtx(() => [
-                (openBlock(), createBlock(resolveDynamicComponent(props.MessageTimeDivider || unref(DefaultMessageTimeDivider)), {
-                  previousMessage: chunkIndex > 0 ? messageChunks.value[chunkIndex - 1].messages[0] : void 0,
-                  currentMessage: chunk.messages[0]
-                }, null, 8, ["previousMessage", "currentMessage"])),
-                createElementVNode("div", _hoisted_2, [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(chunk.messages, (message, messageIndex) => {
-                    return openBlock(), createBlock(resolveDynamicComponent(props.Message || unref(_sfc_main$2)), {
-                      key: message.ID,
-                      message,
-                      alignment: props.alignment,
-                      messageActionList: props.messageActionList,
-                      isAggregated: Boolean(enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1),
-                      "is-first-in-chunk": Boolean(messageIndex === 0),
-                      "is-last-in-chunk": Boolean(messageIndex === chunk.messages.length - 1),
-                      isHiddenMessageAvatar: Boolean(
-                        _ctx.alignment === "two-sided" ? enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1 || message.flow === "out" : enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
-                      ),
-                      isHiddenMessageMeta: Boolean(
-                        enableMessageAggregation.value && messageIndex !== chunk.messages.length - 1
-                      )
-                    }, null, 8, ["message", "alignment", "messageActionList", "isAggregated", "is-first-in-chunk", "is-last-in-chunk", "isHiddenMessageAvatar", "isHiddenMessageMeta"]);
-                  }), 128))
-                ])
-              ]),
-              _: 2
-            }, 1032, ["class"]);
-          }), 128))
-        ], 512),
-        createVNode(unref(MessageForward)),
-        isScrollToBottomVisible.value ? (openBlock(), createBlock(unref(ScrollToBottom), {
-          key: 0,
-          class: normalizeClass(unref(cs)("scroll-to-bottom")),
-          onClick: _cache[0] || (_cache[0] = ($event) => unref(scrollToBottom)({ behavior: "smooth" }))
-        }, null, 8, ["class"])) : createCommentVNode("", true)
-      ]);
-    };
+      immediate: !0
+    }), K(() => {
+      t.value && t.value.addEventListener("scroll", b), H();
+    }), Q(() => {
+      t.value && t.value.removeEventListener("scroll", b);
+    }), (l, s) => (u(), C("div", ce, [
+      S("div", {
+        id: "messageScrollList",
+        ref_key: "scrollContainer",
+        ref: t,
+        class: "message-list-container"
+      }, [
+        N(i(Z), {
+          root: "#messageScrollList",
+          rootMargin: "50px 0px 0px 0px",
+          threshold: 0.1,
+          onOnShow: X
+        }, {
+          default: V(() => [...s[1] || (s[1] = [
+            S("div", { id: "loadMore" }, null, -1)
+          ])]),
+          _: 1
+        }),
+        (u(!0), C(F, null, $(L.value, (o, e) => (u(), k(i(ee), {
+          key: o.key,
+          class: x(i(I)("message-chunk--container"))
+        }, {
+          default: V(() => [
+            (u(), k(O(a.MessageTimeDivider || i(ie)), {
+              previousMessage: e > 0 ? L.value[e - 1].messages[0] : void 0,
+              currentMessage: o.messages[0]
+            }, null, 8, ["previousMessage", "currentMessage"])),
+            S("div", me, [
+              (u(!0), C(F, null, $(o.messages, (n, r) => (u(), k(O(a.Message || i(oe)), {
+                key: n.ID,
+                message: n,
+                alignment: a.alignment,
+                messageActionList: a.messageActionList,
+                isAggregated: !!(M.value && r !== o.messages.length - 1),
+                "is-first-in-chunk": r === 0,
+                "is-last-in-chunk": r === o.messages.length - 1,
+                isHiddenMessageAvatar: !!(B.alignment === "two-sided" ? M.value && r !== o.messages.length - 1 || n.flow === "out" : M.value && r !== o.messages.length - 1),
+                isHiddenMessageMeta: !!(M.value && r !== o.messages.length - 1)
+              }, null, 8, ["message", "alignment", "messageActionList", "isAggregated", "is-first-in-chunk", "is-last-in-chunk", "isHiddenMessageAvatar", "isHiddenMessageMeta"]))), 128))
+            ])
+          ]),
+          _: 2
+        }, 1032, ["class"]))), 128))
+      ], 512),
+      N(i(le)),
+      h.value ? (u(), k(i(re), {
+        key: 0,
+        class: x(i(I)("scroll-to-bottom")),
+        onClick: s[0] || (s[0] = (o) => i(_)({ behavior: "smooth" }))
+      }, null, 8, ["class"])) : Y("", !0)
+    ]));
   }
-});
-const MessageListComponent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cb526f87"]]);
+}), De = /* @__PURE__ */ ue(ge, [["__scopeId", "data-v-cb526f87"]]);
 export {
-  MessageListComponent as default
+  De as default
 };

package/dist/components/MessageList/MessageListContext.js

@@ -1,13 +1,12 @@
-import { inject } from "vue";
-const MessageListContextSymbol = Symbol("MessageListContext");
-function useMessageListContext(componentName) {
-  const context = inject(MessageListContextSymbol, null);
-  if (context === null) {
-    throw new Error(`<${componentName}> must be used within Parent MessageList.`);
-  }
-  return context;
+import { inject as s } from "vue";
+const n = Symbol("MessageListContext");
+function i(e) {
+  const t = s(n, null);
+  if (t === null)
+    throw new Error(`<${e}> must be used within Parent MessageList.`);
+  return t;
 }
 export {
-  MessageListContextSymbol,
-  useMessageListContext
+  n as MessageListContextSymbol,
+  i as useMessageListContext
 };

package/dist/components/MessageList/MessageTimeDivider/MessageTimeDivider.js

@@ -1,38 +1,30 @@
-import { defineComponent, computed, createBlock, openBlock, resolveDynamicComponent, h, Fragment } from "vue";
-import { getTimeStampAuto } from "../../../utils/time.js";
-import { _ as _export_sfc } from "../../../_plugin-vue_export-helper-1tPrXgE0.js";
-const _sfc_main = /* @__PURE__ */ defineComponent({
+import { defineComponent as m, computed as u, createBlock as p, openBlock as d, resolveDynamicComponent as f, h as r, Fragment as l } from "vue";
+import { getTimeStampAuto as v } from "../../../utils/time.js";
+import { _ as g } from "../../../_plugin-vue_export-helper-CHgC5LLL.js";
+const _ = /* @__PURE__ */ m({
   __name: "MessageTimeDivider",
   props: {
     previousMessage: { default: void 0 },
     currentMessage: { default: () => ({}) }
   },
-  setup(__props) {
-    const props = __props;
-    const shouldShowTimeDivider = computed(() => {
-      var _a, _b;
-      if (!((_a = props.currentMessage) == null ? void 0 : _a.time)) {
-        return false;
-      }
-      const prevTime = ((_b = props.previousMessage) == null ? void 0 : _b.time) || 0;
-      const currentTime = props.currentMessage.time;
-      return currentTime - prevTime > 5 * 60;
-    });
-    const renderDefaultContent = () => {
-      if (!shouldShowTimeDivider.value) {
-        return h(Fragment, null, []);
-      }
-      const currentTime = props.currentMessage.time;
-      return h("div", { class: "message-time-divider" }, [
-        h("span", {}, getTimeStampAuto(currentTime * 1e3))
+  setup(o) {
+    const e = o, i = u(() => {
+      var s, n;
+      if (!((s = e.currentMessage) != null && s.time))
+        return !1;
+      const t = ((n = e.previousMessage) == null ? void 0 : n.time) || 0;
+      return e.currentMessage.time - t > 5 * 60;
+    }), c = () => {
+      if (!i.value)
+        return r(l, null, []);
+      const t = e.currentMessage.time;
+      return r("div", { class: "message-time-divider" }, [
+        r("span", {}, v(t * 1e3))
       ]);
     };
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(resolveDynamicComponent(renderDefaultContent()));
-    };
+    return (t, a) => (d(), p(f(c())));
   }
-});
-const DefaultMessageTimeDivider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3ccc6b1e"]]);
+}), h = /* @__PURE__ */ g(_, [["__scopeId", "data-v-3ccc6b1e"]]);
 export {
-  DefaultMessageTimeDivider as default
+  h as default
 };

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

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