@mobilon-dev/chotto 0.3.98 → 0.3.99

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

@@ -1,25 +1,28 @@
-import { defineComponent as ie, ref as m, computed as o, provide as p, inject as T, unref as le, watch as ce, nextTick as D, onMounted as de } from "vue";
-import ue from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
-import fe from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
-import me from "../../2_feed_elements/BaseEditMessage/BaseEditMessage.vue.js";
-import pe from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
-import ge from "../../2_feed_elements/FeedKeyboard/FeedKeyboard.vue.js";
-import ye from "../../2_feed_elements/TypingMessage/TypingMessage.vue.js";
-import be from "../../1_atoms/LoadingIndicator/LoadingIndicator.vue.js";
-import { useFeedButton as he } from "./composables/useFeedButton.js";
-import { useFeedComponents as Me } from "./composables/useFeedComponents.js";
-import { useFeedGrouping as ke } from "./composables/useFeedGrouping.js";
-import { useFeedKeyboard as Se } from "./composables/useFeedKeyboard.js";
-import { useFeedLoadMore as Re } from "./composables/useFeedLoadMore.js";
-import { useFeedMessageVisibility as ve } from "./composables/useFeedMessageVisibility.js";
-import { useFeedReply as Be } from "./composables/useFeedReply.js";
-import { useFeedScroll as Ie } from "./composables/useFeedScroll.js";
-import { useFeedScrollTo as je } from "./composables/useFeedScrollTo.js";
-import { useStickyDate as Ae } from "./composables/useStickyDate.js";
-import { throttle as Ce } from "./functions/throttle.js";
-import { getDefaultMessageMenuActions as Fe } from "./utils/getDefaultMessageMenuActions.js";
-import Te from "./assets/chat-background.svg.js";
-const Ye = /* @__PURE__ */ ie({
+import { defineComponent as be, ref as h, computed as r, provide as v, inject as K, unref as t, watch as ke, nextTick as x, onMounted as he, createElementBlock as c, openBlock as i, createVNode as g, createBlock as u, createCommentVNode as l, normalizeStyle as O, renderSlot as L, withDirectives as ve, createElementVNode as M, vShow as Me, Transition as S, withCtx as R, Fragment as Se, renderList as Re, resolveDynamicComponent as Ie, mergeProps as Ae, toDisplayString as Be, Teleport as U } from "vue";
+import Ce from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
+import Fe from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
+import Te from "../../2_feed_elements/BaseEditMessage/BaseEditMessage.vue.js";
+import De from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
+import we from "../../2_feed_elements/FeedKeyboard/FeedKeyboard.vue.js";
+import je from "../../2_feed_elements/TypingMessage/TypingMessage.vue.js";
+import Ke from "../../1_atoms/LoadingIndicator/LoadingIndicator.vue.js";
+import { useFeedButton as xe } from "./composables/useFeedButton.js";
+import { useFeedComponents as Oe } from "./composables/useFeedComponents.js";
+import { useFeedGrouping as Le } from "./composables/useFeedGrouping.js";
+import { useFeedKeyboard as Ue } from "./composables/useFeedKeyboard.js";
+import { useFeedLoadMore as Ee } from "./composables/useFeedLoadMore.js";
+import { useFeedMessageVisibility as Ne } from "./composables/useFeedMessageVisibility.js";
+import { useFeedReply as Ve } from "./composables/useFeedReply.js";
+import { useFeedScroll as $e } from "./composables/useFeedScroll.js";
+import { useFeedScrollTo as qe } from "./composables/useFeedScrollTo.js";
+import { useStickyDate as Pe } from "./composables/useStickyDate.js";
+import { throttle as ze } from "./functions/throttle.js";
+import { getDefaultMessageMenuActions as We } from "./utils/getDefaultMessageMenuActions.js";
+import Ge from "./assets/chat-background.svg.js";
+const He = { class: "message-feed-wrapper" }, Je = ["id"], Qe = { class: "message-feed__loading" }, Xe = ["id", "data-timestamp", "onDblclick"], Ye = { style: { margin: "auto" } }, Ze = {
+  key: 0,
+  class: "message-feed__unread-amount"
+}, vt = /* @__PURE__ */ be({
   __name: "Feed",
   props: {
     objects: {
@@ -55,7 +58,7 @@ const Ye = /* @__PURE__ */ ie({
     keyboardAlign: {
       type: String,
       default: "right",
-      validator: (s) => ["left", "center", "right"].includes(s)
+      validator: (e) => ["left", "center", "right"].includes(e)
     },
     feedKeyboards: {
       type: Array,
@@ -65,7 +68,7 @@ const Ye = /* @__PURE__ */ ie({
     feedKeyboardAlign: {
       type: String,
       default: "right",
-      validator: (s) => ["left", "center", "right"].includes(s)
+      validator: (e) => ["left", "center", "right"].includes(e)
     },
     chatBackground: {
       type: String,
@@ -82,7 +85,7 @@ const Ye = /* @__PURE__ */ ie({
     reactionsMode: {
       type: String,
       default: "single",
-      validator: (s) => ["single", "multi"].includes(s)
+      validator: (e) => ["single", "multi"].includes(e)
     },
     /** Id текущего пользователя — для расчёта «моих» реакций */
     currentUserId: {
@@ -114,7 +117,7 @@ const Ye = /* @__PURE__ */ ie({
      */
     messageMenuActions: {
       type: Array,
-      default: () => Fe()
+      default: () => We()
     }
   },
   emits: [
@@ -129,133 +132,261 @@ const Ye = /* @__PURE__ */ ie({
     "smsInvite",
     "delimiterRead"
   ],
-  setup(s, { expose: O, emit: _ }) {
-    O();
-    const e = s, l = m(), n = m(), g = m(), {
-      isShowButton: w,
-      isKeyboardPlace: y,
-      checkButtonVisibility: b
-    } = he({
-      feedRef: n,
-      keyboardRef: g
-    }), { componentsMap: U } = Me(), x = o(() => e.reactionsEnabled), K = o(() => e.reactionsMode), h = o(() => e.currentUserId), M = o(() => e.reactionUserNames);
-    p("currentUserId", h), p("reactionUserNames", M), p(
+  setup(e, { emit: E }) {
+    const a = e, k = h(), m = h(), I = h(), {
+      isShowButton: N,
+      isKeyboardPlace: V,
+      checkButtonVisibility: $
+    } = xe({
+      feedRef: m,
+      keyboardRef: I
+    }), { componentsMap: q } = Oe(), P = r(() => a.reactionsEnabled), z = r(() => a.reactionsMode), A = r(() => a.currentUserId), B = r(() => a.reactionUserNames);
+    v("currentUserId", A), v("reactionUserNames", B), v(
       "messageMenuActions",
-      o(() => e.messageMenuActions)
+      r(() => a.messageMenuActions)
     );
-    const { groupedObjects: q } = ke({
-      objects: o(() => e.objects)
-    }), c = T("chatAppId"), d = T("selectedChat", void 0), u = o(() => {
-      if (d)
-        return le(d);
+    const { groupedObjects: W } = Le({
+      objects: r(() => a.objects)
+    }), y = K("chatAppId"), C = K("selectedChat", void 0), F = r(() => {
+      if (C)
+        return t(C);
     });
-    function E(t) {
-      return t.timestamp;
+    function G(s) {
+      return s.timestamp;
     }
-    function L(t) {
-      var F;
-      const i = t;
-      if (!i.dialogId || !((F = u.value) != null && F.dialogs))
+    function H(s) {
+      var f;
+      const n = s;
+      if (!n.dialogId || !((f = F.value) != null && f.dialogs))
         return;
-      const a = u.value.dialogs.find((ne) => ne.dialogId === i.dialogId);
-      return a == null ? void 0 : a.channelId;
+      const o = F.value.dialogs.find((b) => b.dialogId === n.dialogId);
+      return o == null ? void 0 : o.channelId;
     }
-    function N(t) {
-      return t.type === "message.call" && typeof e.callMessageOnCallback == "function" ? { onCall: e.callMessageOnCallback } : {};
+    function J(s) {
+      return s.type === "message.call" && typeof a.callMessageOnCallback == "function" ? { onCall: a.callMessageOnCallback } : {};
     }
-    const r = _, {
-      checkScrollPosition: k,
-      startScrollWatch: P,
-      stopScrollWatch: V,
-      resetAllowFlags: S
-    } = Re({
-      feedRef: n,
-      emit: r,
-      isLoadingMoreRef: o(() => e.isLoadingMore)
+    const d = E, {
+      checkScrollPosition: Q,
+      startScrollWatch: T,
+      stopScrollWatch: D,
+      resetAllowFlags: X
+    } = Ee({
+      feedRef: m,
+      emit: d,
+      isLoadingMoreRef: r(() => a.isLoadingMore)
     }), {
-      getMessage: W,
-      messageAction: z,
-      handleClickReplied: $,
-      feedObjectDoubleClick: G,
-      handleResetReply: H,
-      handleResetEdit: J
-    } = Be({
-      enableDoubleClickReply: e.enableDoubleClickReply,
-      emit: r
+      getMessage: p,
+      messageAction: Y,
+      handleClickReplied: Z,
+      feedObjectDoubleClick: _,
+      handleResetReply: ee,
+      handleResetEdit: te
+    } = Ve({
+      enableDoubleClickReply: a.enableDoubleClickReply,
+      emit: d
     });
-    function Q(t) {
-      r("smsInvite", t);
+    function oe(s) {
+      d("smsInvite", s);
     }
-    function X(t) {
-      r("delimiterRead", t);
+    function se(s) {
+      d("delimiterRead", s);
     }
     const {
-      showKeyboard: Y,
-      keyboardAction: Z,
-      feedKeyboardAction: ee
-    } = Se({
-      isKeyboardPlace: y,
-      objects: o(() => e.objects),
-      emit: r
+      showKeyboard: ae,
+      keyboardAction: ne,
+      feedKeyboardAction: ie
+    } = Ue({
+      isKeyboardPlace: V,
+      objects: r(() => a.objects),
+      emit: d
     }), {
-      showStickyDate: te,
-      stickyDateText: oe,
-      show: R
-    } = Ae({
-      feedRef: n,
-      trackingObjects: l
+      showStickyDate: re,
+      stickyDateText: le,
+      show: de
+    } = Pe({
+      feedRef: m,
+      trackingObjects: k
     }), {
-      isInitialized: v,
-      initializeScroll: B,
-      smoothScrollToBottom: I
-    } = Ie({
-      feedRef: n,
-      objectsRef: o(() => e.objects),
-      scrollToBottomRef: o(() => e.scrollToBottom)
-    }), re = o(() => e.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(Te)}`);
-    function f(t = !0) {
-      b(), k(t), R();
+      isInitialized: ce,
+      initializeScroll: ue,
+      smoothScrollToBottom: me
+    } = $e({
+      feedRef: m,
+      objectsRef: r(() => a.objects),
+      scrollToBottomRef: r(() => a.scrollToBottom)
+    }), w = r(() => a.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(Ge)}`);
+    function j(s = !0) {
+      $(), Q(s), de();
     }
-    const se = Ce(() => f(), 250);
-    function ae() {
-      r("forceScrollToBottom"), I();
+    const fe = ze(() => j(), 250);
+    function ge() {
+      d("forceScrollToBottom"), me();
     }
-    function j(t) {
-      const i = e.objects;
-      if (t.startsWith("mid-")) {
-        const a = parseInt(t.slice(4), 10);
-        return i[a];
+    function ye(s) {
+      const n = a.objects;
+      if (s.startsWith("mid-")) {
+        const o = parseInt(s.slice(4), 10);
+        return n[o];
       }
-      return i.find((a) => a.messageId === t);
+      return n.find((o) => o.messageId === s);
     }
-    const { restartObserving: A } = ve({
-      trackingObjects: l,
-      chatAppId: c,
-      getMessageById: j,
-      onMessageVisible: (t) => r("messageVisible", t)
+    const { restartObserving: pe } = Ne({
+      trackingObjects: k,
+      chatAppId: y,
+      getMessageById: ye,
+      onMessageVisible: (s) => d("messageVisible", s)
     });
-    ce(
-      () => e.objects,
+    return ke(
+      () => a.objects,
       () => {
-        D(() => {
+        x(() => {
           requestAnimationFrame(() => {
-            S(), f(!1), l.value = document.querySelectorAll(".tracking-message"), A();
+            X(), j(!1), k.value = document.querySelectorAll(".tracking-message"), pe();
           });
         });
       },
       { immediate: !0 }
-    ), je({
-      targetIdRef: o(() => e.scrollTo),
-      feedContainerId: `feed-container-${c}`
-    }), de(() => {
-      D(() => {
-        e.objects.length > 0 && !v.value && B();
+    ), qe({
+      targetIdRef: r(() => a.scrollTo),
+      feedContainerId: `feed-container-${y}`
+    }), he(() => {
+      x(() => {
+        a.objects.length > 0 && !ce.value && ue();
       });
-    });
-    const C = { props: e, trackingObjects: l, refFeed: n, keyboardRef: g, isShowButton: w, isKeyboardPlace: y, checkButtonVisibility: b, componentsMap: U, reactionsEnabled: x, reactionsMode: K, currentUserId: h, reactionUserNames: M, groupedObjects: q, chatAppId: c, selectedChatInjected: d, selectedChat: u, getMessageTimestamp: E, getChannelForMessage: L, getExtraMessageProps: N, emit: r, checkScrollPosition: k, startScrollWatch: P, stopScrollWatch: V, resetAllowFlags: S, getMessage: W, messageAction: z, handleClickReplied: $, feedObjectDoubleClick: G, handleResetReply: H, handleResetEdit: J, handleSmsInvite: Q, handleDelimiterRead: X, showKeyboard: Y, keyboardAction: Z, feedKeyboardAction: ee, showStickyDate: te, stickyDateText: oe, showStickyDateComponent: R, isInitialized: v, initializeScroll: B, smoothScrollToBottom: I, defaultBackground: re, scrollTopCheck: f, throttledScrollTopCheck: se, scrollToBottomForce: ae, getMessageById: j, restartObserving: A, DateMessageSticky: ue, BaseReplyMessage: fe, BaseEditMessage: me, MessageKeyboard: pe, FeedKeyboard: ge, TypingMessage: ye, LoadingIndicator: be };
-    return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
+    }), (s, n) => (i(), c("div", He, [
+      e.objects.length > 0 || e.typing ? (i(), c("div", {
+        key: 0,
+        id: "feed-container-" + t(y),
+        ref_key: "refFeed",
+        ref: m,
+        class: "message-feed",
+        style: O({ backgroundImage: `url(${w.value})` }),
+        onScroll: n[0] || (n[0] = (o) => t(fe)()),
+        onMousedown: n[1] || (n[1] = //@ts-ignore
+        (...o) => t(T) && t(T)(...o)),
+        onMouseup: n[2] || (n[2] = //@ts-ignore
+        (...o) => t(D) && t(D)(...o))
+      }, [
+        L(s.$slots, "prepend", {}, void 0, !0),
+        ve(M("div", Qe, [
+          g(Ke, {
+            "is-loading": e.isLoadingMore,
+            size: "small",
+            position: "top"
+          }, null, 8, ["is-loading"])
+        ], 512), [
+          [Me, e.isLoadingMore]
+        ]),
+        g(S, null, {
+          default: R(() => [
+            t(re) && !e.isLoadingMore ? (i(), u(Ce, {
+              key: 0,
+              class: "message-feed__sticky-date",
+              text: t(le)
+            }, null, 8, ["text"])) : l("", !0)
+          ]),
+          _: 1
+        }),
+        (i(!0), c(Se, null, Re(t(W), (o, f) => (i(), c("div", {
+          id: "msg-" + (o.messageId ?? "mid-" + f),
+          key: o.messageId ?? "mid-" + f,
+          "data-timestamp": G(o),
+          class: "tracking-message",
+          onDblclick: (b) => t(_)(b, o)
+        }, [
+          (i(), u(Ie(t(q)(o)), Ae({
+            key: o.messageId ?? "mid-" + f,
+            class: "message-feed__message",
+            message: o,
+            "apply-style": e.applyStyle,
+            "is-first-in-series": o.isFirstInSeries,
+            "reactions-enabled": P.value,
+            "reactions-mode": z.value,
+            "current-user-id": A.value,
+            "reaction-user-names": B.value,
+            "subtext-tooltip-data": e.subtextTooltipData,
+            channel: H(o)
+          }, { ref_for: !0 }, J(o), {
+            onAction: t(Y),
+            onReply: t(Z),
+            onSmsInvite: (b) => oe(o),
+            onRead: se
+          }), null, 16, ["message", "apply-style", "is-first-in-series", "reactions-enabled", "reactions-mode", "current-user-id", "reaction-user-names", "subtext-tooltip-data", "channel", "onAction", "onReply", "onSmsInvite"]))
+        ], 40, Xe))), 128)),
+        e.typing ? (i(), u(je, {
+          key: 0,
+          message: {
+            subText: e.typing.title,
+            avatar: e.typing.avatar
+          }
+        }, null, 8, ["message"])) : l("", !0),
+        g(S, null, {
+          default: R(() => [
+            t(ae) ? (i(), u(De, {
+              key: 0,
+              ref_key: "keyboardRef",
+              ref: I,
+              class: "message-feed__keyboard",
+              keyboard: e.objects[e.objects.length - 1].keyboard,
+              align: e.keyboardAlign,
+              onAction: t(ne)
+            }, null, 8, ["keyboard", "align", "onAction"])) : l("", !0)
+          ]),
+          _: 1
+        }),
+        e.feedKeyboards && e.feedKeyboards.length > 0 ? (i(), u(we, {
+          key: 1,
+          buttons: e.feedKeyboards,
+          align: e.feedKeyboardAlign,
+          onAction: t(ie)
+        }, null, 8, ["buttons", "align", "onAction"])) : l("", !0)
+      ], 44, Je)) : (i(), c("div", {
+        key: 1,
+        ref_key: "refFeed",
+        ref: m,
+        class: "message-feed",
+        style: O({ backgroundImage: `url(${w.value})` })
+      }, [
+        M("div", Ye, [
+          L(s.$slots, "empty-feed", {}, void 0, !0)
+        ])
+      ], 4)),
+      g(S, null, {
+        default: R(() => [
+          t(N) ? (i(), c("button", {
+            key: 0,
+            class: "message-feed__button-down",
+            onClick: ge
+          }, [
+            e.buttonParams ? (i(), c("div", Ze, Be(e.buttonParams.unreadAmount), 1)) : l("", !0),
+            n[3] || (n[3] = M("span", { class: "pi pi-angle-down message-feed__icon-down" }, null, -1))
+          ])) : l("", !0)
+        ]),
+        _: 1
+      }),
+      t(p)().reply ? (i(), u(U, {
+        key: 2,
+        to: "#chat-input-reply-line-" + t(y)
+      }, [
+        g(Fe, {
+          class: "chat-input-reply",
+          message: t(p)().reply,
+          onReset: t(ee)
+        }, null, 8, ["message", "onReset"])
+      ], 8, ["to"])) : l("", !0),
+      t(p)().edit ? (i(), u(U, {
+        key: 3,
+        to: "#chat-input-reply-line-" + t(y)
+      }, [
+        g(Te, {
+          class: "chat-input-reply",
+          message: t(p)().edit,
+          onReset: t(te)
+        }, null, 8, ["message", "onReset"])
+      ], 8, ["to"])) : l("", !0)
+    ]));
   }
 });
 export {
-  Ye as default
+  vt as default
 };