@mobilon-dev/chotto 0.3.33 → 0.3.34

package/dist/components/2_chatlist_elements/ChatItem/ChatItem.vue2.js

@@ -1,193 +1,257 @@
-import { defineComponent as $, ref as g, computed as v, watch as F, createElementBlock as s, openBlock as a, createElementVNode as o, createCommentVNode as l, normalizeClass as y, normalizeStyle as x, createVNode as f, withCtx as k, toDisplayString as u, createBlock as z, unref as H, Fragment as j, renderList as q } from "vue";
-import { getStatus as G, statuses as J } from "../../../functions/getStatusMessage.js";
+import { defineComponent as lt, inject as rt, useId as ut, ref as p, computed as M, watch as dt, onMounted as ht, nextTick as b, onUnmounted as mt, createElementBlock as c, openBlock as s, createElementVNode as a, createCommentVNode as l, withModifiers as gt, normalizeClass as B, normalizeStyle as X, createVNode as I, withCtx as A, toDisplayString as r, createBlock as S, Teleport as vt, unref as C, Fragment as yt, renderList as ft } from "vue";
+import { getStatus as pt, statuses as kt } from "../../../functions/getStatusMessage.js";
 import "../../../functions/parseMarkdown.js";
-import { t as p } from "../../../locale/useLocale.js";
-import C from "../../1_atoms/Tooltip/Tooltip.vue.js";
-import K from "../../1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js";
-import O from "../../1_icons/AvatarIcon.vue.js";
-const P = { class: "chat-item__avatar-container" }, Q = ["src"], R = {
+import { t as U } from "../../../locale/useLocale.js";
+import "../../../hooks/useMessageDraft.js";
+import "../../../hooks/useSearchModel.js";
+import { useTheme as xt } from "../../../hooks/useTheme.js";
+/* empty css                              */
+/* empty css                                              */
+import "../../../node_modules/linkifyjs/dist/linkify.js";
+import Y from "../../1_atoms/Tooltip/Tooltip.vue.js";
+import _t from "../../1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js";
+import Mt from "../../1_atoms/ContextMenu/ContextMenu.vue.js";
+import Ct from "../../1_icons/AvatarIcon.vue.js";
+const wt = { class: "chat-item__avatar-container" }, Tt = ["src"], Et = {
   key: 1,
   class: "chat-item__avatar-placeholder"
-}, W = { class: "chat-item__info-container" }, X = { class: "chat-item__name" }, Y = {
+}, bt = { class: "chat-item__info-container" }, Bt = { class: "chat-item__name" }, It = {
   key: 0,
   class: "chat-item__last-message"
-}, Z = { class: "chat-item__details-container" }, tt = {
+}, At = { class: "chat-item__details-container" }, St = {
   key: 0,
   class: "chat-item__time"
-}, et = { class: "chat-item__status-unread-container" }, at = {
+}, Ut = { class: "chat-item__status-unread-container" }, Lt = {
   key: 0,
   class: "pi pi-check"
-}, st = {
+}, Nt = {
   key: 1,
   class: "chat-item__unread"
-}, it = {
+}, Dt = {
   key: 2,
   class: "chat-item__status-chat-container"
-}, nt = {
+}, Vt = {
   key: 0,
   class: "chat-item__fixed pi pi-thumbtack"
-}, ct = {
+}, Xt = {
   key: 0,
   id: "noSelectButton",
   class: "chat-item__menu-button"
-}, ot = {
+}, Yt = {
   key: 1,
   id: "noSelectButton",
   class: "chat-item__menu-button"
-}, lt = {
+}, Ht = {
   key: 0,
   class: "dialog__container"
-}, ut = ["onClick"], rt = ["src"], dt = {
+}, Ot = ["onClick"], Rt = ["src"], Ft = {
   key: 1,
   class: "dialog__icon pi pi-user"
-}, mt = { class: "dialog__text-container" }, ht = { class: "dialog__name" }, vt = { class: "dialog__time" }, bt = /* @__PURE__ */ $({
+}, $t = { class: "dialog__text-container" }, zt = { class: "dialog__name" }, Wt = { class: "dialog__time" }, ce = /* @__PURE__ */ lt({
   __name: "ChatItem",
   props: {
     chat: {},
-    showDialogs: { type: Boolean, default: !0 }
+    showDialogs: { type: Boolean, default: !0 },
+    contextMenuTrigger: { default: "hover" }
   },
   emits: ["select", "action", "expand"],
-  setup(e, { emit: b }) {
-    const t = e, m = b, r = g(!1), _ = g(!1), M = () => {
-      _.value = !0;
-    }, w = (n) => {
-      _.value || n.target instanceof HTMLElement && n.target.id != "noSelectButton" && m("select", { chat: t.chat, dialog: null }), _.value = !1;
-    }, B = (n) => {
-      m("select", { chat: t.chat, dialog: n });
-    }, U = () => t.chat.isSelected ? "chat-item__selected" : "", A = (n) => n.isSelected ? "dialog__selected" : "", I = (n) => {
-      m("action", { chat: t.chat, ...n });
-    }, S = () => t.chat.dialogs ? [...t.chat.dialogs].sort((n, i) => Number(n["lastActivity.timestamp"]) > Number(i["lastActivity.timestamp"]) ? -1 : Number(n["lastActivity.timestamp"]) < Number(i["lastActivity.timestamp"]) ? 1 : (Number(n["lastActivity.timestamp"]) == Number(i["lastActivity.timestamp"]), 0)) : [], E = v(() => G(t.chat["lastMessage.status"])), N = v(() => t.chat.showEmptyIndicator || t.chat.countUnread > 0), D = v(() => t.chat.countUnread > 0 ? t.chat.countUnread > 99 ? "99+" : t.chat.countUnread : t.chat.showEmptyIndicator ? "" : void 0);
-    let h;
-    const d = g(0), T = [p("component.ChatItem.typing") + ".", p("component.ChatItem.typing") + "..", p("component.ChatItem.typing") + "..."], L = v(() => t.chat.typing ? T[d.value] : t.chat.lastMessage);
-    F(
-      () => t.chat.typing,
+  setup(o, { emit: H }) {
+    const O = rt("chatAppId"), { getTheme: L } = xt(O), e = o, k = H, u = ut(), d = p(!1), h = p(!1), w = p(!1), R = p(null), F = () => {
+      w.value = !0;
+    }, $ = (t) => {
+      w.value || t.target instanceof HTMLElement && t.target.id != "noSelectButton" && k("select", { chat: e.chat, dialog: null }), w.value = !1;
+    }, z = (t) => {
+      k("select", { chat: e.chat, dialog: t });
+    }, W = () => e.chat.isSelected ? "chat-item__selected" : "", j = (t) => t.isSelected ? "dialog__selected" : "", N = (t) => {
+      e.contextMenuTrigger === "rightClick" && T(), k("action", { chat: e.chat, ...t });
+    }, T = () => {
+      const t = document.getElementById("context-menu-rightclick-" + u);
+      t && (t.style.top = "0", t.style.left = "0", t.style.opacity = "0", t.style.display = "none"), h.value = !1;
+    }, q = () => {
+      document.querySelectorAll('[id^="context-menu-rightclick-"]').forEach((n) => {
+        const i = n;
+        i.id !== "context-menu-rightclick-" + u && (i.style.top = "0", i.style.left = "0", i.style.opacity = "0", i.style.display = "none");
+      });
+    }, G = () => e.chat.dialogs ? [...e.chat.dialogs].sort((t, n) => Number(t["lastActivity.timestamp"]) > Number(n["lastActivity.timestamp"]) ? -1 : Number(t["lastActivity.timestamp"]) < Number(n["lastActivity.timestamp"]) ? 1 : (Number(t["lastActivity.timestamp"]) == Number(n["lastActivity.timestamp"]), 0)) : [], J = M(() => pt(e.chat["lastMessage.status"])), K = M(() => e.chat.showEmptyIndicator || e.chat.countUnread > 0), P = M(() => e.chat.countUnread > 0 ? e.chat.countUnread > 99 ? "99+" : e.chat.countUnread : e.chat.showEmptyIndicator ? "" : void 0);
+    let x;
+    const m = p(0), Q = [U("component.ChatItem.typing") + ".", U("component.ChatItem.typing") + "..", U("component.ChatItem.typing") + "..."], Z = M(() => e.chat.typing ? Q[m.value] : e.chat.lastMessage);
+    dt(
+      () => e.chat.typing,
       () => {
-        t.chat.typing ? h = setInterval(() => {
-          d.value < 2 ? d.value += 1 : d.value = 0;
-        }, 1e3) : (d.value = 0, h && (clearInterval(h), h = void 0));
+        e.chat.typing ? x = setInterval(() => {
+          m.value < 2 ? m.value += 1 : m.value = 0;
+        }, 1e3) : (m.value = 0, x && (clearInterval(x), x = void 0));
       },
       { immediate: !0 }
     );
-    const V = (n) => {
-      n.relatedTarget instanceof HTMLElement && n.relatedTarget.className == "context-menu__list" ? r.value = !0 : r.value = !1;
+    const tt = () => {
+      e.contextMenuTrigger === "hover" && (d.value = !0);
+    }, et = (t) => {
+      e.contextMenuTrigger === "hover" && (t.relatedTarget instanceof HTMLElement && t.relatedTarget.className == "context-menu__list" ? d.value = !0 : d.value = !1);
+    }, nt = (t) => {
+      e.contextMenuTrigger === "rightClick" && e.chat.actions && it(t);
+    }, it = (t) => {
+      q(), h.value = !0, b(() => {
+        const n = document.getElementById("context-menu-rightclick-" + u);
+        if (n) {
+          const i = t.clientX, E = t.clientY;
+          n.style.display = "inherit";
+          const _ = n.getBoundingClientRect();
+          n.style.display = "none", b(() => {
+            const ct = window.innerWidth, at = window.innerHeight, g = window.scrollX || window.pageXOffset, v = window.scrollY || window.pageYOffset;
+            let y = i + g, f = E + v;
+            y + _.width > ct + g && (y = i + g - _.width), f + _.height > at + v && (f = E + v - _.height), y < g && (y = g), f < v && (f = v), n.style.top = f + "px", n.style.left = y + "px", n.style.opacity = "1", n.style.display = "inherit";
+          });
+        }
+      });
+    }, ot = () => {
+    }, st = () => {
+    }, D = (t) => {
+      if (e.contextMenuTrigger === "rightClick" && h.value) {
+        const n = t.target, i = document.getElementById("context-menu-rightclick-" + u);
+        (!i || !i.contains(n)) && T();
+      }
+    }, V = () => {
+      e.contextMenuTrigger === "rightClick" && h.value && T();
     };
-    return (n, i) => (a(), s("div", null, [
-      o("div", {
-        class: y(["chat-item__container", U()]),
-        onMouseenter: i[2] || (i[2] = (c) => r.value = !0),
-        onMouseleave: V,
-        onClick: w
+    return ht(() => {
+      e.contextMenuTrigger === "rightClick" && (document.addEventListener("click", D), window.addEventListener("scroll", V, !0), b(() => {
+        const t = document.getElementById("context-menu-rightclick-" + u);
+        t && (t.style.display = "none", t.style.opacity = "0");
+      }));
+    }), mt(() => {
+      document.removeEventListener("click", D), window.removeEventListener("scroll", V, !0);
+    }), (t, n) => (s(), c("div", null, [
+      a("div", {
+        ref_key: "containerRef",
+        ref: R,
+        class: B(["chat-item__container", W()]),
+        onMouseenter: tt,
+        onMouseleave: et,
+        onClick: $,
+        onContextmenu: gt(nt, ["prevent"])
       }, [
-        o("div", P, [
-          o("span", {
+        a("div", wt, [
+          a("span", {
             class: "chat-item__status-user",
-            style: x({ backgroundColor: t.chat.status })
+            style: X({ backgroundColor: e.chat.status })
           }, null, 4),
-          t.chat.avatar ? (a(), s("img", {
+          e.chat.avatar ? (s(), c("img", {
             key: 0,
-            src: t.chat.avatar,
+            src: e.chat.avatar,
             height: "48",
             width: "48"
-          }, null, 8, Q)) : (a(), s("div", R, [
-            f(O)
+          }, null, 8, Tt)) : (s(), c("div", Et, [
+            I(Ct)
           ]))
         ]),
-        o("div", W, [
-          f(C, {
-            text: e.chat.name,
+        a("div", bt, [
+          I(Y, {
+            text: o.chat.name,
             position: "bottom"
           }, {
-            default: k(() => [
-              o("div", X, u(e.chat.name), 1)
+            default: A(() => [
+              a("div", Bt, r(o.chat.name), 1)
             ]),
             _: 1
           }, 8, ["text"]),
-          f(C, {
-            text: e.chat.lastMessage,
+          I(Y, {
+            text: o.chat.lastMessage,
             position: "bottom"
           }, {
-            default: k(() => [
-              e.chat.lastMessage || e.chat.typing ? (a(), s("div", Y, u(L.value), 1)) : l("", !0)
+            default: A(() => [
+              o.chat.lastMessage || o.chat.typing ? (s(), c("div", It, r(Z.value), 1)) : l("", !0)
             ]),
             _: 1
           }, 8, ["text"])
         ]),
-        o("div", Z, [
-          e.chat["lastActivity.time"] && (!e.chat.actions || !r.value) ? (a(), s("div", tt, u(e.chat["lastActivity.time"]), 1)) : l("", !0),
-          r.value && e.chat.actions ? (a(), z(K, {
+        a("div", At, [
+          o.chat["lastActivity.time"] && (!o.chat.actions || !d.value) ? (s(), c("div", St, r(o.chat["lastActivity.time"]), 1)) : l("", !0),
+          d.value && o.chat.actions && o.contextMenuTrigger === "hover" ? (s(), S(_t, {
             key: 1,
             mode: "click",
-            "menu-side": "bottom",
-            actions: e.chat.actions,
-            onClick: I,
-            onButtonClick: M,
-            onMenuMouseLeave: i[0] || (i[0] = (c) => r.value = !1)
+            "menu-side": "bottom-right",
+            actions: o.chat.actions,
+            onClick: N,
+            onButtonClick: F,
+            onMenuMouseLeave: n[0] || (n[0] = (i) => d.value = !1)
           }, {
-            default: k(() => [...i[3] || (i[3] = [
-              o("span", { class: "pi pi-ellipsis-h chat-item__actions-trigger" }, null, -1)
+            default: A(() => [...n[2] || (n[2] = [
+              a("span", { class: "pi pi-ellipsis-h chat-item__actions-trigger" }, null, -1)
             ])]),
             _: 1
           }, 8, ["actions"])) : l("", !0),
-          o("div", et, [
-            H(J).includes(e.chat["lastMessage.status"]) ? (a(), s("div", {
+          (s(), S(vt, { to: "body" }, [
+            o.contextMenuTrigger === "rightClick" && o.chat.actions && h.value ? (s(), S(Mt, {
               key: 0,
-              class: y(["chat-item__status-message", E.value])
+              id: "context-menu-rightclick-" + C(u),
+              actions: o.chat.actions,
+              "data-theme": C(L)().theme ? C(L)().theme : "light",
+              onClick: N,
+              onMouseenter: ot,
+              onMouseleave: st
+            }, null, 8, ["id", "actions", "data-theme"])) : l("", !0)
+          ])),
+          a("div", Ut, [
+            C(kt).includes(o.chat["lastMessage.status"]) ? (s(), c("div", {
+              key: 0,
+              class: B(["chat-item__status-message", J.value])
             }, [
-              e.chat["lastMessage.status"] !== "sent" ? (a(), s("span", at)) : l("", !0),
-              i[4] || (i[4] = o("span", { class: "pi pi-check" }, null, -1))
+              o.chat["lastMessage.status"] !== "sent" ? (s(), c("span", Lt)) : l("", !0),
+              n[3] || (n[3] = a("span", { class: "pi pi-check" }, null, -1))
             ], 2)) : l("", !0),
-            N.value ? (a(), s("div", st, u(D.value), 1)) : l("", !0)
+            K.value ? (s(), c("div", Nt, r(P.value), 1)) : l("", !0)
           ]),
-          e.chat.countUnread < 1 ? (a(), s("div", it, [
-            e.chat.isFixedTop || e.chat.isFixedBottom ? (a(), s("span", nt)) : l("", !0)
+          o.chat.countUnread < 1 ? (s(), c("div", Dt, [
+            o.chat.isFixedTop || o.chat.isFixedBottom ? (s(), c("span", Vt)) : l("", !0)
           ])) : l("", !0)
         ]),
-        t.showDialogs && e.chat.dialogs ? (a(), s("div", {
+        e.showDialogs && o.chat.dialogs ? (s(), c("div", {
           key: 0,
           class: "chat-item__dialog-buttons",
-          onClick: i[1] || (i[1] = (c) => m("expand", t.chat))
+          onClick: n[1] || (n[1] = (i) => k("expand", e.chat))
         }, [
-          t.showDialogs && !e.chat.dialogsExpanded ? (a(), s("button", ct, [...i[5] || (i[5] = [
-            o("span", {
+          e.showDialogs && !o.chat.dialogsExpanded ? (s(), c("button", Xt, [...n[4] || (n[4] = [
+            a("span", {
               id: "noSelectButton",
               class: "pi pi-angle-down"
             }, null, -1)
           ])])) : l("", !0),
-          t.showDialogs && e.chat.dialogsExpanded ? (a(), s("button", ot, [...i[6] || (i[6] = [
-            o("span", {
+          e.showDialogs && o.chat.dialogsExpanded ? (s(), c("button", Yt, [...n[5] || (n[5] = [
+            a("span", {
               id: "noSelectButton",
               class: "pi pi-angle-up"
             }, null, -1)
           ])])) : l("", !0)
         ])) : l("", !0)
       ], 34),
-      t.showDialogs && e.chat.dialogsExpanded ? (a(), s("div", lt, [
-        (a(!0), s(j, null, q(S(), (c) => (a(), s("div", {
-          key: c.dialogId,
-          class: y(["dialog__item", A(c)]),
-          onClick: (_t) => B(c)
+      e.showDialogs && o.chat.dialogsExpanded ? (s(), c("div", Ht, [
+        (s(!0), c(yt, null, ft(G(), (i) => (s(), c("div", {
+          key: i.dialogId,
+          class: B(["dialog__item", j(i)]),
+          onClick: (E) => z(i)
         }, [
-          c.icon ? (a(), s("img", {
+          i.icon ? (s(), c("img", {
             key: 0,
             class: "dialog__icon",
-            src: c.icon,
+            src: i.icon,
             height: "16",
             width: "16"
-          }, null, 8, rt)) : (a(), s("span", dt)),
-          o("div", mt, [
-            o("div", ht, u(c.name), 1),
-            o("div", vt, u(c["lastActivity.time"]), 1)
+          }, null, 8, Rt)) : (s(), c("span", Ft)),
+          a("div", $t, [
+            a("div", zt, r(i.name), 1),
+            a("div", Wt, r(i["lastActivity.time"]), 1)
           ]),
-          c.countUnread > 0 ? (a(), s("div", {
+          i.countUnread > 0 ? (s(), c("div", {
             key: 2,
             class: "chat-item__unread",
-            style: x(c.colorUnread ? { backgroundColor: c.colorUnread } : {})
-          }, u(c.countUnread > 99 ? "99+" : c.countUnread), 5)) : l("", !0)
-        ], 10, ut))), 128))
+            style: X(i.colorUnread ? { backgroundColor: i.colorUnread } : {})
+          }, r(i.countUnread > 99 ? "99+" : i.countUnread), 5)) : l("", !0)
+        ], 10, Ot))), 128))
       ])) : l("", !0)
     ]));
   }
 });
 export {
-  bt as default
+  ce as default
 };

package/dist/components/2_feed_elements/ImageMessage/ImageMessage.vue.js

@@ -1,7 +1,7 @@
 import o from "./ImageMessage.vue2.js";
 /* empty css                  */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-db94d3b9"]]);
+const r = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6b1b745c"]]);
 export {
   r as default
 };