@mobilon-dev/chotto 0.3.49 → 0.3.51

package/dist/components/2_feed_elements/DelimiterMessage/DelimiterMessage.vue2.js

@@ -1,5 +1,5 @@
-import { defineComponent as t, createElementBlock as s, openBlock as r, createElementVNode as o, toDisplayString as a } from "vue";
-const i = { class: "delimiter-message__container" }, n = { class: "delimiter-message__text" }, l = /* @__PURE__ */ t({
+import { defineComponent as f, ref as a, onMounted as d, onBeforeUnmount as g, watch as _, createElementBlock as v, openBlock as p, normalizeClass as T, createElementVNode as R, toDisplayString as D } from "vue";
+const O = { class: "delimiter-message__text" }, b = 3e3, h = 400, y = /* @__PURE__ */ f({
   __name: "DelimiterMessage",
   props: {
     message: {
@@ -7,12 +7,48 @@ const i = { class: "delimiter-message__container" }, n = { class: "delimiter-mes
       required: !0
     }
   },
-  setup(e) {
-    return (c, m) => (r(), s("div", i, [
-      o("p", n, a(e.message.text), 1)
-    ]));
+  emits: ["read"],
+  setup(i, { emit: m }) {
+    const s = i, c = m, n = a(null), r = a(!1);
+    let t = null, e = null;
+    const l = () => {
+      !s.message.autoRemove || !n.value || (t = new IntersectionObserver(
+        (o) => {
+          o[0].isIntersecting ? (e && clearTimeout(e), e = setTimeout(() => {
+            r.value = !0, t && n.value && (t.disconnect(), t = null), setTimeout(() => {
+              c("read", s.message.messageId);
+            }, h);
+          }, b)) : e && (clearTimeout(e), e = null);
+        },
+        {
+          threshold: 0.75,
+          // Элемент должен быть виден минимум на 75%
+          rootMargin: "0px"
+        }
+      ), t.observe(n.value));
+    };
+    return d(() => {
+      s.message.autoRemove && setTimeout(() => {
+        l();
+      }, 100);
+    }), g(() => {
+      e && (clearTimeout(e), e = null), t && (t.disconnect(), t = null);
+    }), _(
+      () => s.message.autoRemove,
+      (o) => {
+        t && (t.disconnect(), t = null), e && (clearTimeout(e), e = null), o && setTimeout(() => {
+          l();
+        }, 100);
+      }
+    ), (o, u) => (p(), v("div", {
+      ref_key: "containerRef",
+      ref: n,
+      class: T(["delimiter-message__container", { "delimiter-message__container--removing": r.value }])
+    }, [
+      R("p", O, D(i.message.text), 1)
+    ], 2));
   }
 });
 export {
-  l as default
+  y as default
 };

package/dist/components/3_compounds/Feed/Feed.vue.js

@@ -1,7 +1,7 @@
 import o from "./Feed.vue2.js";
 /* empty css          */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-90b7e791"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9686a172"]]);
 export {
-  p as default
+  m as default
 };

package/dist/components/3_compounds/Feed/Feed.vue2.js

@@ -1,25 +1,25 @@
-import { defineComponent as de, ref as k, computed as i, inject as D, unref as e, watch as ce, nextTick as w, onMounted as ue, createElementBlock as d, openBlock as s, Fragment as j, createBlock as m, createCommentVNode as c, normalizeStyle as K, createVNode as b, Transition as h, withCtx as v, renderList as me, resolveDynamicComponent as fe, createElementVNode as x, toDisplayString as ye, renderSlot as ge, Teleport as be } from "vue";
-import pe from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
-import ke from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
-import he from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
-import ve from "../../2_feed_elements/FeedKeyboard/FeedKeyboard.vue.js";
-import Se from "../../2_feed_elements/TypingMessage/TypingMessage.vue.js";
-import { useFeedButton as Re } from "./composables/useFeedButton.js";
-import { useFeedComponents as Be } from "./composables/useFeedComponents.js";
-import { useFeedGrouping as Te } from "./composables/useFeedGrouping.js";
-import { useFeedKeyboard as Ae } from "./composables/useFeedKeyboard.js";
-import { useFeedLoadMore as Ie } from "./composables/useFeedLoadMore.js";
-import { useFeedMessageVisibility as Ce } from "./composables/useFeedMessageVisibility.js";
-import { useFeedReply as Fe } from "./composables/useFeedReply.js";
-import { useFeedScroll as Me } from "./composables/useFeedScroll.js";
-import { useFeedScrollTo as De } from "./composables/useFeedScrollTo.js";
-import { useStickyDate as we } from "./composables/useStickyDate.js";
-import { throttle as je } from "./functions/throttle.js";
-import Ke from "./assets/chat-background.svg.js";
-const xe = ["id"], $e = ["id", "onDblclick"], Oe = {
+import { defineComponent as ue, ref as k, computed as i, inject as D, unref as e, watch as me, nextTick as w, onMounted as fe, createElementBlock as c, openBlock as n, Fragment as j, createBlock as m, createCommentVNode as u, normalizeStyle as K, renderSlot as $, createVNode as b, Transition as h, withCtx as v, renderList as ye, resolveDynamicComponent as ge, createElementVNode as x, toDisplayString as be, Teleport as pe } from "vue";
+import ke from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
+import he from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
+import ve from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
+import Se from "../../2_feed_elements/FeedKeyboard/FeedKeyboard.vue.js";
+import Re from "../../2_feed_elements/TypingMessage/TypingMessage.vue.js";
+import { useFeedButton as Be } from "./composables/useFeedButton.js";
+import { useFeedComponents as Te } from "./composables/useFeedComponents.js";
+import { useFeedGrouping as Ae } from "./composables/useFeedGrouping.js";
+import { useFeedKeyboard as Ie } from "./composables/useFeedKeyboard.js";
+import { useFeedLoadMore as Ce } from "./composables/useFeedLoadMore.js";
+import { useFeedMessageVisibility as Fe } from "./composables/useFeedMessageVisibility.js";
+import { useFeedReply as Me } from "./composables/useFeedReply.js";
+import { useFeedScroll as De } from "./composables/useFeedScroll.js";
+import { useFeedScrollTo as we } from "./composables/useFeedScrollTo.js";
+import { useStickyDate as je } from "./composables/useStickyDate.js";
+import { throttle as Ke } from "./functions/throttle.js";
+import $e from "./assets/chat-background.svg.js";
+const xe = ["id"], Oe = ["id", "onDblclick"], Ve = {
   key: 0,
   class: "message-feed__unread-amount"
-}, Ve = { style: { margin: "auto" } }, ot = /* @__PURE__ */ de({
+}, qe = { style: { margin: "auto" } }, st = /* @__PURE__ */ ue({
   __name: "Feed",
   props: {
     objects: {
@@ -94,222 +94,228 @@ const xe = ["id"], $e = ["id", "onDblclick"], Oe = {
     "forceScrollToBottom",
     "keyboardAction",
     "feedAction",
-    "smsInvite"
+    "smsInvite",
+    "delimiterRead"
   ],
-  setup(t, { emit: $ }) {
-    const n = t, p = k(), r = k(), S = k(), {
-      isShowButton: O,
-      isKeyboardPlace: V,
-      checkButtonVisibility: q
-    } = Re({
+  setup(t, { emit: O }) {
+    const l = t, p = k(), r = k(), S = k(), {
+      isShowButton: V,
+      isKeyboardPlace: q,
+      checkButtonVisibility: z
+    } = Be({
       feedRef: r,
       keyboardRef: S
-    }), { componentsMap: z } = Be(), E = i(() => n.reactionsEnabled), { groupedObjects: L } = Te({
-      objects: i(() => n.objects)
+    }), { componentsMap: E } = Te(), L = i(() => l.reactionsEnabled), { groupedObjects: P } = Ae({
+      objects: i(() => l.objects)
     }), y = D("chatAppId"), R = D("selectedChat", void 0), B = i(() => {
       if (R)
         return e(R);
     });
-    function P(l) {
+    function N(s) {
       var f;
-      const a = l;
+      const a = s;
       if (!a.dialogId || !((f = B.value) != null && f.dialogs))
         return;
       const o = B.value.dialogs.find((g) => g.dialogId === a.dialogId);
       return o == null ? void 0 : o.channelId;
     }
-    const u = $, {
-      checkScrollPosition: N,
+    const d = O, {
+      checkScrollPosition: W,
       startScrollWatch: T,
       stopScrollWatch: A,
-      resetAllowFlags: W
-    } = Ie({
+      resetAllowFlags: G
+    } = Ce({
       feedRef: r,
-      emit: u,
-      isLoadingMoreRef: i(() => n.isLoadingMore)
+      emit: d,
+      isLoadingMoreRef: i(() => l.isLoadingMore)
     }), {
       getMessage: I,
-      messageAction: G,
-      handleClickReplied: J,
-      feedObjectDoubleClick: U,
-      handleResetReply: H
-    } = Fe({
-      enableDoubleClickReply: n.enableDoubleClickReply,
-      emit: u
+      messageAction: J,
+      handleClickReplied: U,
+      feedObjectDoubleClick: H,
+      handleResetReply: Q
+    } = Me({
+      enableDoubleClickReply: l.enableDoubleClickReply,
+      emit: d
     });
-    function Q(l) {
-      u("smsInvite", l);
+    function X(s) {
+      d("smsInvite", s);
+    }
+    function Y(s) {
+      d("delimiterRead", s);
     }
     const {
-      showKeyboard: X,
-      keyboardAction: Y,
-      feedKeyboardAction: Z
-    } = Ae({
-      isKeyboardPlace: V,
-      objects: i(() => n.objects),
-      emit: u
+      showKeyboard: Z,
+      keyboardAction: _,
+      feedKeyboardAction: ee
+    } = Ie({
+      isKeyboardPlace: q,
+      objects: i(() => l.objects),
+      emit: d
     }), {
-      showStickyDate: _,
-      stickyDateText: ee,
-      show: te
-    } = we({
+      showStickyDate: te,
+      stickyDateText: oe,
+      show: se
+    } = je({
       feedRef: r,
       trackingObjects: p
     }), {
-      isInitialized: oe,
-      performScrollToBottom: se,
+      isInitialized: ne,
+      performScrollToBottom: le,
       ensureScrollToBottom: C,
-      initializeScroll: ne,
-      smoothScrollToBottom: le
-    } = Me({
+      initializeScroll: ae,
+      smoothScrollToBottom: re
+    } = De({
       feedRef: r,
-      objectsRef: i(() => n.objects),
-      scrollToBottomRef: i(() => n.scrollToBottom)
-    }), F = i(() => n.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(Ke)}`);
-    function M(l = !0) {
-      q(), N(l), te();
+      objectsRef: i(() => l.objects),
+      scrollToBottomRef: i(() => l.scrollToBottom)
+    }), F = i(() => l.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent($e)}`);
+    function M(s = !0) {
+      z(), W(s), se();
     }
-    const ae = je(() => M(), 250);
-    function re() {
-      u("forceScrollToBottom"), le();
+    const ie = Ke(() => M(), 250);
+    function de() {
+      d("forceScrollToBottom"), re();
     }
-    const { restartObserving: ie } = Ce({
+    const { restartObserving: ce } = Fe({
       feedRef: r,
       trackingObjects: p,
       chatAppId: y,
-      onMessageVisible: (l) => u("messageVisible", l)
+      onMessageVisible: (s) => d("messageVisible", s)
     });
-    return ce(
-      () => n.objects,
+    return me(
+      () => l.objects,
       () => {
         w(() => {
-          W(), M(!1), p.value = document.querySelectorAll(".tracking-message"), ie();
+          G(), M(!1), p.value = document.querySelectorAll(".tracking-message"), ce();
         });
       },
       { immediate: !0 }
-    ), De({
-      targetIdRef: i(() => n.scrollTo),
+    ), we({
+      targetIdRef: i(() => l.scrollTo),
       feedContainerId: `feed-container-${y}`
-    }), ue(() => {
+    }), fe(() => {
       w(() => {
-        n.objects.length > 0 && !oe.value && ne();
-        const l = new ResizeObserver(() => {
-          n.scrollToBottom && (se(), setTimeout(() => {
+        l.objects.length > 0 && !ne.value && ae();
+        const s = new ResizeObserver(() => {
+          l.scrollToBottom && (le(), setTimeout(() => {
             C();
           }, 200), setTimeout(() => {
             C();
           }, 800));
         });
-        r.value && l.observe(r.value);
+        r.value && s.observe(r.value);
       });
-    }), (l, a) => (s(), d(j, null, [
-      t.objects.length > 0 || t.typing ? (s(), d("div", {
+    }), (s, a) => (n(), c(j, null, [
+      t.objects.length > 0 || t.typing ? (n(), c("div", {
         key: 0,
         id: "feed-container-" + e(y),
         ref_key: "refFeed",
         ref: r,
         class: "message-feed",
         style: K({ backgroundImage: `url(${F.value})` }),
-        onScroll: a[0] || (a[0] = (o) => e(ae)()),
+        onScroll: a[0] || (a[0] = (o) => e(ie)()),
         onMousedown: a[1] || (a[1] = //@ts-ignore
         (...o) => e(T) && e(T)(...o)),
         onMouseup: a[2] || (a[2] = //@ts-ignore
         (...o) => e(A) && e(A)(...o))
       }, [
+        $(s.$slots, "prepend", {}, void 0, !0),
         b(h, null, {
           default: v(() => [
-            e(_) ? (s(), m(pe, {
+            e(te) ? (n(), m(ke, {
               key: 0,
               class: "message-feed__sticky-date",
-              text: e(ee)
-            }, null, 8, ["text"])) : c("", !0)
+              text: e(oe)
+            }, null, 8, ["text"])) : u("", !0)
           ]),
           _: 1
         }),
-        (s(!0), d(j, null, me(e(L), (o, f) => (s(), d("div", {
+        (n(!0), c(j, null, ye(e(P), (o, f) => (n(), c("div", {
           id: JSON.stringify(o),
           key: `${o.messageId ?? "mid"}-${f}`,
           class: "tracking-message",
-          onDblclick: (g) => e(U)(g, o)
+          onDblclick: (g) => e(H)(g, o)
         }, [
-          (s(), m(fe(e(z)(o.type)), {
+          (n(), m(ge(e(E)(o.type)), {
             key: `${o.messageId ?? "mid"}-${f}`,
             class: "message-feed__message",
             message: o,
             "apply-style": t.applyStyle,
             "is-first-in-series": o.isFirstInSeries,
-            "reactions-enabled": E.value,
+            "reactions-enabled": L.value,
             "subtext-tooltip-data": t.subtextTooltipData,
-            channel: P(o),
-            onAction: e(G),
-            onReply: e(J),
-            onSmsInvite: (g) => Q(o)
+            channel: N(o),
+            onAction: e(J),
+            onReply: e(U),
+            onSmsInvite: (g) => X(o),
+            onRead: Y
           }, null, 40, ["message", "apply-style", "is-first-in-series", "reactions-enabled", "subtext-tooltip-data", "channel", "onAction", "onReply", "onSmsInvite"]))
-        ], 40, $e))), 128)),
-        t.typing ? (s(), m(Se, {
+        ], 40, Oe))), 128)),
+        t.typing ? (n(), m(Re, {
           key: 0,
           message: {
             subText: t.typing.title,
             avatar: t.typing.avatar
           }
-        }, null, 8, ["message"])) : c("", !0),
+        }, null, 8, ["message"])) : u("", !0),
         b(h, null, {
           default: v(() => [
-            e(X) ? (s(), m(he, {
+            e(Z) ? (n(), m(ve, {
               key: 0,
               ref_key: "keyboardRef",
               ref: S,
               class: "message-feed__keyboard",
               keyboard: t.objects[t.objects.length - 1].keyboard,
               align: t.keyboardAlign,
-              onAction: e(Y)
-            }, null, 8, ["keyboard", "align", "onAction"])) : c("", !0)
+              onAction: e(_)
+            }, null, 8, ["keyboard", "align", "onAction"])) : u("", !0)
           ]),
           _: 1
         }),
         b(h, null, {
           default: v(() => [
-            e(O) ? (s(), d("button", {
+            e(V) ? (n(), c("button", {
               key: 0,
               class: "message-feed__button-down",
-              onClick: re
+              onClick: de
             }, [
-              t.buttonParams ? (s(), d("div", Oe, ye(t.buttonParams.unreadAmount), 1)) : c("", !0),
+              t.buttonParams ? (n(), c("div", Ve, be(t.buttonParams.unreadAmount), 1)) : u("", !0),
               a[3] || (a[3] = x("span", { class: "pi pi-angle-down message-feed__icon-down" }, null, -1))
-            ])) : c("", !0)
+            ])) : u("", !0)
           ]),
           _: 1
         }),
-        t.feedKeyboards && t.feedKeyboards.length > 0 ? (s(), m(ve, {
+        t.feedKeyboards && t.feedKeyboards.length > 0 ? (n(), m(Se, {
           key: 1,
           buttons: t.feedKeyboards,
           align: t.feedKeyboardAlign,
-          onAction: e(Z)
-        }, null, 8, ["buttons", "align", "onAction"])) : c("", !0)
-      ], 44, xe)) : (s(), d("div", {
+          onAction: e(ee)
+        }, null, 8, ["buttons", "align", "onAction"])) : u("", !0)
+      ], 44, xe)) : (n(), c("div", {
         key: 1,
         ref_key: "refFeed",
         ref: r,
         class: "message-feed",
         style: K({ backgroundImage: `url(${F.value})` })
       }, [
-        x("div", Ve, [
-          ge(l.$slots, "empty-feed", {}, void 0, !0)
+        x("div", qe, [
+          $(s.$slots, "empty-feed", {}, void 0, !0)
         ])
       ], 4)),
-      e(I)().reply ? (s(), m(be, {
+      e(I)().reply ? (n(), m(pe, {
         key: 2,
         to: "#chat-input-reply-line-" + e(y)
       }, [
-        b(ke, {
+        b(he, {
           class: "chat-input-reply",
           message: e(I)().reply,
-          onReset: e(H)
+          onReset: e(Q)
         }, null, 8, ["message", "onReset"])
-      ], 8, ["to"])) : c("", !0)
+      ], 8, ["to"])) : u("", !0)
     ], 64));
   }
 });
 export {
-  ot as default
+  st as default
 };