@mobilon-dev/chotto 0.3.56 → 0.3.57

package/dist/components/1_atoms/Tooltip/Tooltip.vue.js

@@ -1,7 +1,7 @@
 import o from "./Tooltip.vue2.js";
 /* empty css             */
 import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d13721a4"]]);
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-595f9104"]]);
 export {
   m as default
 };

package/dist/components/1_atoms/Tooltip/Tooltip.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as k, inject as N, ref as c, computed as A, onUnmounted as D, createElementBlock as d, openBlock as m, Fragment as R, createElementVNode as V, createBlock as E, renderSlot as I, Teleport as L, createVNode as M, Transition as $, withCtx as j, createCommentVNode as q, normalizeClass as z, unref as v, toDisplayString as F, nextTick as g } from "vue";
+import { defineComponent as k, inject as N, ref as u, computed as A, onUnmounted as D, createElementBlock as T, openBlock as m, Fragment as R, createElementVNode as V, createBlock as E, renderSlot as I, Teleport as L, createVNode as M, Transition as $, withCtx as j, createCommentVNode as q, normalizeClass as z, unref as v, toDisplayString as F, nextTick as g } from "vue";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
 import { useTheme as P } from "../../../hooks/useTheme.js";
@@ -35,54 +35,56 @@ const U = ["data-theme"], Z = /* @__PURE__ */ k({
       default: 600
     }
   },
-  setup(y, { expose: w }) {
-    const x = N("chatAppId"), { getTheme: T } = P(x), p = c(), a = c(), n = c(!1), s = c(null), f = c(null), e = y, _ = A(() => ({
+  setup(w, { expose: d }) {
+    const x = N("chatAppId"), { getTheme: y } = P(x), p = u(), a = u(), c = u(!1), h = u(null), r = u(null), e = w, _ = A(() => ({
       tooltip__text: !0,
       [`tooltip--${e.position}`]: !0
     })), B = () => {
-      e.trigger !== "auto" && (f.value && (clearTimeout(f.value), f.value = null), f.value = setTimeout(() => {
-        n.value = !0, g(() => {
+      e.trigger !== "auto" && (r.value && (clearTimeout(r.value), r.value = null), r.value = setTimeout(() => {
+        c.value = !0, g(() => {
           if (p.value && a.value) {
-            const l = a.value, t = p.value.getBoundingClientRect(), o = a.value.getBoundingClientRect(), i = o.left < 0 ? o.left : 0, r = o.top < 0 ? o.top : 0, u = {
-              left: { top: t.top - (o.height - t.height) / 2 - r, left: (t == null ? void 0 : t.left) - o.width - i - e.offset },
-              right: { top: t.top - (o.height - t.height) / 2 - r, left: (t == null ? void 0 : t.left) + t.width - i + e.offset },
-              bottom: { top: (t == null ? void 0 : t.bottom) - r + e.offset, left: (t == null ? void 0 : t.left) - i },
-              top: { top: t.top - o.height - e.offset - r, left: (t == null ? void 0 : t.left) - i },
-              "bottom-left": { top: (t == null ? void 0 : t.bottom) - r + e.offset, left: (t == null ? void 0 : t.left) + t.width - o.width - i }
+            const f = a.value, t = p.value.getBoundingClientRect(), o = a.value.getBoundingClientRect(), l = o.left < 0 ? o.left : 0, i = o.top < 0 ? o.top : 0, n = {
+              left: { top: t.top - (o.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) - o.width - l - e.offset },
+              right: { top: t.top - (o.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) + t.width - l + e.offset },
+              bottom: { top: (t == null ? void 0 : t.bottom) - i + e.offset, left: (t == null ? void 0 : t.left) - l },
+              "bottom-center": { top: (t == null ? void 0 : t.bottom) - i + e.offset, left: (t == null ? void 0 : t.left) + t.width / 2 - o.width / 2 - l },
+              top: { top: t.top - o.height - e.offset - i, left: (t == null ? void 0 : t.left) - l },
+              "bottom-left": { top: (t == null ? void 0 : t.bottom) - i + e.offset, left: (t == null ? void 0 : t.left) + t.width - o.width - l }
             };
-            l.style.top = u[e.position].top + "px", l.style.left = u[e.position].left + "px";
+            f.style.top = n[e.position].top + "px", f.style.left = n[e.position].left + "px";
           }
-        }), f.value = null;
+        }), r.value = null;
       }, e.delay));
     }, C = () => {
-      e.trigger !== "auto" && (f.value && (clearTimeout(f.value), f.value = null), n.value = !1, g(() => {
-        const l = v(a);
-        l && (l.style.top = "0", l.style.left = "0");
+      e.trigger !== "auto" && (r.value && (clearTimeout(r.value), r.value = null), c.value = !1, g(() => {
+        const f = v(a);
+        f && (f.style.top = "0", f.style.left = "0");
       }));
     }, S = () => {
-      h(), n.value = !0, g(() => {
+      s(), c.value = !0, g(() => {
         if (p.value && a.value) {
-          const l = a.value, t = p.value.getBoundingClientRect(), o = a.value.getBoundingClientRect(), i = o.left < 0 ? o.left : 0, r = o.top < 0 ? o.top : 0, u = {
-            left: { top: t.top - (o.height - t.height) / 2 - r, left: (t == null ? void 0 : t.left) - o.width - i - e.offset },
-            right: { top: t.top - (o.height - t.height) / 2 - r, left: (t == null ? void 0 : t.left) + t.width - i + e.offset },
-            bottom: { top: (t == null ? void 0 : t.bottom) - r + e.offset, left: (t == null ? void 0 : t.left) - i },
-            top: { top: t.top - o.height - e.offset - r, left: (t == null ? void 0 : t.left) - i },
-            "bottom-left": { top: (t == null ? void 0 : t.bottom) - r + e.offset, left: (t == null ? void 0 : t.left) + t.width - o.width - i }
+          const f = a.value, t = p.value.getBoundingClientRect(), o = a.value.getBoundingClientRect(), l = o.left < 0 ? o.left : 0, i = o.top < 0 ? o.top : 0, n = {
+            left: { top: t.top - (o.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) - o.width - l - e.offset },
+            right: { top: t.top - (o.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) + t.width - l + e.offset },
+            bottom: { top: (t == null ? void 0 : t.bottom) - i + e.offset, left: (t == null ? void 0 : t.left) - l },
+            "bottom-center": { top: (t == null ? void 0 : t.bottom) - i + e.offset, left: (t == null ? void 0 : t.left) + t.width / 2 - o.width / 2 - l },
+            top: { top: t.top - o.height - e.offset - i, left: (t == null ? void 0 : t.left) - l },
+            "bottom-left": { top: (t == null ? void 0 : t.bottom) - i + e.offset, left: (t == null ? void 0 : t.left) + t.width - o.width - l }
           };
-          l.style.top = u[e.position].top + "px", l.style.left = u[e.position].left + "px";
+          f.style.top = n[e.position].top + "px", f.style.left = n[e.position].left + "px";
         }
-      }), e.autoShowDuration > 0 && (s.value = setTimeout(() => {
-        n.value = !1;
+      }), e.autoShowDuration > 0 && (h.value = setTimeout(() => {
+        c.value = !1;
       }, e.autoShowDuration));
-    }, h = () => {
-      s.value && (clearTimeout(s.value), s.value = null);
+    }, s = () => {
+      h.value && (clearTimeout(h.value), h.value = null);
     };
     return D(() => {
-      f.value && clearTimeout(f.value), h();
-    }), w({
+      r.value && clearTimeout(r.value), s();
+    }), d({
       startAutoShow: S,
-      clearAutoTimer: h
-    }), (l, t) => (m(), d(R, null, [
+      clearAutoTimer: s
+    }), (f, t) => (m(), T(R, null, [
       V("div", {
         ref_key: "container",
         ref: p,
@@ -90,18 +92,18 @@ const U = ["data-theme"], Z = /* @__PURE__ */ k({
         onMouseover: B,
         onMouseout: C
       }, [
-        I(l.$slots, "default", {}, void 0, !0)
+        I(f.$slots, "default", {}, void 0, !0)
       ], 544),
       (m(), E(L, { to: "body" }, [
         M($, null, {
           default: j(() => [
-            n.value ? (m(), d("span", {
+            c.value ? (m(), T("span", {
               key: 0,
               ref_key: "tooltip",
               ref: a,
-              "data-theme": v(T)().theme ? v(T)().theme : "light",
+              "data-theme": v(y)().theme ? v(y)().theme : "light",
               class: z(_.value)
-            }, F(y.text), 11, U)) : q("", !0)
+            }, F(w.text), 11, U)) : q("", !0)
           ]),
           _: 1
         })

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

@@ -1,7 +1,7 @@
-import o from "./DelimiterMessage.vue2.js";
+import e from "./DelimiterMessage.vue2.js";
 /* empty css                      */
-import t from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9ff92646"]]);
+import o from "../../../_virtual/_plugin-vue_export-helper.js";
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-6097de8c"]]);
 export {
-  m as default
+  s as default
 };

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

@@ -1,54 +1,99 @@
-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({
+import { defineComponent as T, computed as y, ref as c, onMounted as x, onBeforeUnmount as R, watch as b, createElementBlock as u, openBlock as f, createVNode as h, withCtx as D, createElementVNode as a, normalizeClass as d, toDisplayString as g } from "vue";
+import O from "../../1_atoms/Tooltip/Tooltip.vue.js";
+const k = {
+  key: 0,
+  class: "delimiter-message__tooltip-root"
+}, N = { class: "delimiter-message__text" }, I = { class: "delimiter-message__text" }, A = 3e3, E = 400, B = /* @__PURE__ */ T({
   __name: "DelimiterMessage",
   props: {
     message: {
       type: Object,
       required: !0
+    },
+    /** Текст подсказки при наведении. Если не передан — берётся из message.tooltipText */
+    tooltipText: {
+      type: String,
+      default: ""
+    },
+    /** Позиция тултипа: top | right | bottom | left | bottom-left | bottom-center */
+    tooltipPosition: {
+      type: String,
+      default: "bottom-center"
+    },
+    /** Отступ тултипа от элемента (px) */
+    tooltipOffset: {
+      type: Number,
+      default: 8
+    },
+    /** Задержка показа тултипа (ms) */
+    tooltipDelay: {
+      type: Number,
+      default: 100
     }
   },
   emits: ["read"],
-  setup(i, { emit: m }) {
-    const s = i, c = m, n = a(null), r = a(!1);
+  setup(o, { emit: p }) {
+    const i = o, r = y(
+      () => i.tooltipText || i.message.tooltipText || ""
+    ), v = p, s = c(null), l = c(!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);
+    const m = () => {
+      !i.message.autoRemove || !s.value || (t = new IntersectionObserver(
+        (n) => {
+          n[0].isIntersecting ? (e && clearTimeout(e), e = setTimeout(() => {
+            l.value = !0, t && s.value && (t.disconnect(), t = null), setTimeout(() => {
+              v("read", i.message.messageId);
+            }, E);
+          }, A)) : e && (clearTimeout(e), e = null);
         },
         {
           threshold: 0.75,
           // Элемент должен быть виден минимум на 75%
           rootMargin: "0px"
         }
-      ), t.observe(n.value));
+      ), t.observe(s.value));
     };
-    return d(() => {
-      s.message.autoRemove && setTimeout(() => {
-        l();
+    return x(() => {
+      i.message.autoRemove && setTimeout(() => {
+        m();
       }, 100);
-    }), g(() => {
+    }), R(() => {
       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();
+    }), b(
+      () => i.message.autoRemove,
+      (n) => {
+        t && (t.disconnect(), t = null), e && (clearTimeout(e), e = null), n && setTimeout(() => {
+          m();
         }, 100);
       }
-    ), (o, u) => (p(), v("div", {
+    ), (n, _) => r.value ? (f(), u("div", k, [
+      h(O, {
+        text: r.value,
+        position: o.tooltipPosition,
+        offset: o.tooltipOffset,
+        delay: o.tooltipDelay
+      }, {
+        default: D(() => [
+          a("div", {
+            ref_key: "containerRef",
+            ref: s,
+            class: d(["delimiter-message__container", { "delimiter-message__container--removing": l.value }])
+          }, [
+            a("p", N, g(o.message.text), 1)
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["text", "position", "offset", "delay"])
+    ])) : (f(), u("div", {
+      key: 1,
       ref_key: "containerRef",
-      ref: n,
-      class: T(["delimiter-message__container", { "delimiter-message__container--removing": r.value }])
+      ref: s,
+      class: d(["delimiter-message__container", { "delimiter-message__container--removing": l.value }])
     }, [
-      R("p", O, D(i.message.text), 1)
+      a("p", I, g(o.message.text), 1)
     ], 2));
   }
 });
 export {
-  y as default
+  B as default
 };