@mobilon-dev/chotto 0.3.35 → 0.3.36

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

@@ -0,0 +1,7 @@
+import t from "./ContactContextMenu.vue2.js";
+/* empty css                        */
+import o from "../../../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ o(t, [["__scopeId", "data-v-5a7f8e4e"]]);
+export {
+  f as default
+};

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

@@ -0,0 +1,114 @@
+import { defineComponent as L, inject as g, useId as O, ref as m, onMounted as T, nextTick as k, onUnmounted as N, createElementBlock as R, openBlock as x, createElementVNode as M, unref as c, createBlock as V, createVNode as _, Teleport as j } from "vue";
+import P from "../ContextMenu/ContextMenu.vue.js";
+import "../../../hooks/useMessageDraft.js";
+import "../../../hooks/useSearchModel.js";
+import { useTheme as U } from "../../../hooks/useTheme.js";
+/* empty css                              */
+/* empty css                                              */
+import "../../../node_modules/linkifyjs/dist/linkify.js";
+import "../../../functions/parseMarkdown.js";
+import z from "../../1_icons/MenuIcon.vue.js";
+const D = { class: "contact-context-menu__wrapper" }, F = ["id"], G = { class: "contact-context-menu__icon" }, te = /* @__PURE__ */ L({
+  __name: "ContactContextMenu",
+  props: {
+    actions: {
+      type: Array,
+      required: !0
+    },
+    mode: {
+      type: String,
+      required: !1,
+      default: "hover"
+    },
+    disabled: {
+      type: Boolean,
+      default: !1,
+      required: !1
+    },
+    menuSide: {
+      type: String,
+      required: !1,
+      default: "top"
+    }
+  },
+  emits: ["click", "buttonClick", "menuMouseEnter", "menuMouseLeave"],
+  setup(f, { expose: C, emit: b }) {
+    const w = g("chatAppId"), u = g("extChatAppId"), { getTheme: h } = U(w), i = f, p = O(), a = b, n = m(), s = m(), d = m(!1), B = (t) => {
+      l(), a("click", t);
+    }, I = () => {
+      i.disabled || (i.mode == "click" && !d.value ? r() : i.mode == "click" && d.value && l(), a("buttonClick"));
+    }, E = () => {
+      i.disabled || i.mode == "hover" && r();
+    }, S = () => {
+      i.disabled || i.mode == "hover" && l();
+    }, A = () => {
+      a("menuMouseEnter"), i.disabled || i.mode == "hover" && r();
+    }, q = () => {
+      a("menuMouseLeave"), i.disabled || i.mode == "hover" && l();
+    }, r = () => {
+      if (s.value && n.value) {
+        const t = n.value, e = s.value.getBoundingClientRect();
+        t.style.display = "inherit";
+        const o = n.value.getBoundingClientRect();
+        t.style.display = "none", k(() => {
+          const y = {
+            left: { top: e.top - (o.height - e.height) / 2 - o.top, left: e.left - o.width - o.left },
+            right: { top: e.top - (o.height - e.height) / 2 - o.top, left: e.left + e.width - o.left },
+            bottom: { top: (e == null ? void 0 : e.bottom) - o.top, left: (e == null ? void 0 : e.left) - (o.width - e.width) / 2 - o.left },
+            top: { top: e.top - o.height - o.top, left: (e == null ? void 0 : e.left) - (o.width - e.width) / 2 - o.left },
+            "top-right": { top: e.top - o.height, left: e.right - o.width / 2 },
+            "bottom-left": { top: (e == null ? void 0 : e.bottom) - o.top + 10, left: e.left - o.width - o.left + 50 }
+          };
+          t.style.top = y[i.menuSide].top + "px", t.style.left = y[i.menuSide].left + "px", t.style.opacity = "1", t.style.visibility = "visible", t.style.display = "inherit", d.value = !0;
+        });
+      }
+    }, l = () => {
+      if (n.value) {
+        const t = n.value;
+        t && (t.style.top = "0", t.style.left = "0", t.style.opacity = "0", t.style.visibility = "hidden", t.style.display = "none", d.value = !1);
+      }
+    }, v = (t) => {
+      i.mode == "click" && s.value && !s.value.contains(t.target) && l();
+    };
+    return T(() => {
+      k(() => {
+        if (n.value = document.getElementById("context-menu-" + p + u), n.value) {
+          const t = n.value;
+          t.style.display = "none", t.style.visibility = "hidden", t.style.opacity = "0", l(), document.addEventListener("click", v);
+        }
+      });
+    }), N(() => {
+      document.removeEventListener("click", v), n.value && l();
+    }), C({
+      updatePosition: r,
+      hideMenu: l
+    }), (t, e) => (x(), R("div", D, [
+      M("button", {
+        id: "container-" + c(p) + c(u),
+        ref_key: "actionScope",
+        ref: s,
+        class: "contact-context-menu__button",
+        onMouseenter: E,
+        onMouseleave: S,
+        onClick: I
+      }, [
+        M("span", G, [
+          _(z)
+        ]),
+        (x(), V(j, { to: "body" }, [
+          _(P, {
+            id: "context-menu-" + c(p) + c(u),
+            actions: f.actions,
+            "data-theme": c(h)().theme ? c(h)().theme : "light",
+            onMouseenter: A,
+            onMouseleave: q,
+            onClick: B
+          }, null, 8, ["id", "actions", "data-theme"])
+        ]))
+      ], 40, F)
+    ]));
+  }
+});
+export {
+  te as default
+};

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

@@ -1,10 +1,10 @@
-import { createElementBlock as t, openBlock as s, createElementVNode as _, Fragment as h, renderList as k, normalizeClass as d, createCommentVNode as r, toDisplayString as a } from "vue";
+import { createElementBlock as n, openBlock as t, createElementVNode as _, Fragment as h, renderList as y, normalizeClass as d, createBlock as k, createCommentVNode as r, resolveDynamicComponent as f, toDisplayString as a } from "vue";
 /* empty css                 */
-import y from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = ["id", "data-theme"], x = { class: "context-menu__list" }, f = ["onClick"], g = ["src"], C = {
-  key: 2,
+import g from "../../../_virtual/_plugin-vue_export-helper.js";
+const v = ["id", "data-theme"], x = { class: "context-menu__list" }, C = ["onClick"], b = ["src"], w = {
+  key: 3,
   style: { "white-space": "nowrap" }
-}, b = { key: 3 }, M = {
+}, M = { key: 4 }, B = {
   __name: "ContextMenu",
   props: {
     actions: {
@@ -23,38 +23,42 @@ const v = ["id", "data-theme"], x = { class: "context-menu__list" }, f = ["onCli
   emits: ["click", "mouseenter", "mouseleave"],
   setup(o, { emit: u }) {
     const l = o, i = u, p = (c) => {
-      const n = l.actions[c];
-      i("click", n);
+      const s = l.actions[c];
+      i("click", s);
     };
-    return (c, n) => (s(), t("div", {
+    return (c, s) => (t(), n("div", {
       id: o.id,
       class: "context-menu__container",
       "data-theme": o.dataTheme,
-      onMouseenter: n[0] || (n[0] = (e) => i("mouseenter")),
-      onMouseleave: n[1] || (n[1] = (e) => i("mouseleave"))
+      onMouseenter: s[0] || (s[0] = (e) => i("mouseenter")),
+      onMouseleave: s[1] || (s[1] = (e) => i("mouseleave"))
     }, [
       _("ul", x, [
-        (s(!0), t(h, null, k(l.actions, (e, m) => (s(), t("li", {
+        (t(!0), n(h, null, y(l.actions, (e, m) => (t(), n("li", {
           key: m,
           class: d(["context-menu__item", { "context-menu__item--disabled": e.disabled }]),
-          onClick: (w) => !e.disabled && p(m)
+          onClick: (S) => !e.disabled && p(m)
         }, [
-          e.icon ? (s(), t("img", {
+          e.icon && typeof e.icon == "string" ? (t(), n("img", {
             key: 0,
             src: e.icon,
             width: "18",
             height: "18"
-          }, null, 8, g)) : e.prime ? (s(), t("i", {
+          }, null, 8, b)) : e.icon && typeof e.icon == "object" ? (t(), k(f(e.icon), {
             key: 1,
+            width: "18",
+            height: "18"
+          })) : e.prime ? (t(), n("i", {
+            key: 2,
             class: d("pi pi-" + e.prime)
           }, null, 2)) : r("", !0),
-          e.title ? (s(), t("span", C, a(e.title), 1)) : r("", !0),
-          e.description ? (s(), t("span", b, a(e.description), 1)) : r("", !0)
-        ], 10, f))), 128))
+          e.title ? (t(), n("span", w, a(e.title), 1)) : r("", !0),
+          e.description ? (t(), n("span", M, a(e.description), 1)) : r("", !0)
+        ], 10, C))), 128))
       ])
     ], 40, v));
   }
-}, E = /* @__PURE__ */ y(M, [["__scopeId", "data-v-10427b95"]]);
+}, N = /* @__PURE__ */ g(B, [["__scopeId", "data-v-e3896a76"]]);
 export {
-  E as default
+  N as default
 };

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-875fb88b"]]);
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-16a60fe9"]]);
 export {
-  m as default
+  f as default
 };

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

@@ -1,12 +1,12 @@
-import { defineComponent as T, inject as k, ref as s, computed as w, createElementBlock as d, openBlock as a, Fragment as C, createElementVNode as B, createBlock as N, renderSlot as S, Teleport as V, createVNode as A, Transition as E, withCtx as I, createCommentVNode as M, normalizeClass as R, unref as c, toDisplayString as $, nextTick as g } from "vue";
+import { defineComponent as S, inject as k, ref as s, computed as N, createElementBlock as w, openBlock as h, Fragment as A, createElementVNode as D, createBlock as R, renderSlot as V, Teleport as E, createVNode as I, Transition as L, withCtx as M, createCommentVNode as $, normalizeClass as j, unref as u, toDisplayString as q, nextTick as m } from "vue";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
-import { useTheme as j } from "../../../hooks/useTheme.js";
+import { useTheme as z } from "../../../hooks/useTheme.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../functions/parseMarkdown.js";
-const q = ["data-theme"], K = /* @__PURE__ */ T({
+const F = ["data-theme"], W = /* @__PURE__ */ S({
   __name: "Tooltip",
   props: {
     text: {
@@ -20,51 +20,79 @@ const q = ["data-theme"], K = /* @__PURE__ */ T({
     offset: {
       type: Number,
       default: 8
+    },
+    trigger: {
+      type: String,
+      default: "hover"
+    },
+    autoShowDuration: {
+      type: Number,
+      default: 0
     }
   },
-  setup(m) {
-    const v = k("chatAppId"), { getTheme: h } = j(v), f = s(), i = s(), n = s(!1), o = m, y = w(() => ({
+  setup(g, { expose: T }) {
+    const d = k("chatAppId"), { getTheme: v } = z(d), p = s(), r = s(), a = s(!1), n = s(null), e = g, x = N(() => ({
       tooltip__text: !0,
-      [`tooltip--${o.position}`]: !0
+      [`tooltip--${e.position}`]: !0
     })), _ = () => {
-      n.value = !0, g(() => {
-        if (f.value && i.value) {
-          const l = i.value, t = f.value.getBoundingClientRect(), e = i.value.getBoundingClientRect(), p = e.left < 0 ? e.left : 0, r = e.top < 0 ? e.top : 0, u = {
-            left: { top: t.top - (e.height - t.height) / 2 - r, left: (t == null ? void 0 : t.left) - e.width - p - o.offset },
-            right: { top: t.top - (e.height - t.height) / 2 - r, left: (t == null ? void 0 : t.left) + t.width - p + o.offset },
-            bottom: { top: (t == null ? void 0 : t.bottom) - r + o.offset, left: (t == null ? void 0 : t.left) - p },
-            top: { top: t.top - e.height - o.offset - r, left: (t == null ? void 0 : t.left) - p },
-            "bottom-left": { top: (t == null ? void 0 : t.bottom) - r + o.offset, left: (t == null ? void 0 : t.left) + t.width - e.width - p }
+      e.trigger !== "auto" && (a.value = !0, m(() => {
+        if (p.value && r.value) {
+          const l = r.value, t = p.value.getBoundingClientRect(), o = r.value.getBoundingClientRect(), i = o.left < 0 ? o.left : 0, f = o.top < 0 ? o.top : 0, c = {
+            left: { top: t.top - (o.height - t.height) / 2 - f, left: (t == null ? void 0 : t.left) - o.width - i - e.offset },
+            right: { top: t.top - (o.height - t.height) / 2 - f, left: (t == null ? void 0 : t.left) + t.width - i + e.offset },
+            bottom: { top: (t == null ? void 0 : t.bottom) - f + e.offset, left: (t == null ? void 0 : t.left) - i },
+            top: { top: t.top - o.height - e.offset - f, left: (t == null ? void 0 : t.left) - i },
+            "bottom-left": { top: (t == null ? void 0 : t.bottom) - f + e.offset, left: (t == null ? void 0 : t.left) + t.width - o.width - i }
           };
-          l.style.top = u[o.position].top + "px", l.style.left = u[o.position].left + "px";
+          l.style.top = c[e.position].top + "px", l.style.left = c[e.position].left + "px";
         }
-      });
-    }, x = () => {
-      n.value = !1, g(() => {
-        const l = c(i);
+      }));
+    }, B = () => {
+      e.trigger !== "auto" && (a.value = !1, m(() => {
+        const l = u(r);
         l && (l.style.top = "0", l.style.left = "0");
-      });
+      }));
+    }, C = () => {
+      y(), a.value = !0, m(() => {
+        if (p.value && r.value) {
+          const l = r.value, t = p.value.getBoundingClientRect(), o = r.value.getBoundingClientRect(), i = o.left < 0 ? o.left : 0, f = o.top < 0 ? o.top : 0, c = {
+            left: { top: t.top - (o.height - t.height) / 2 - f, left: (t == null ? void 0 : t.left) - o.width - i - e.offset },
+            right: { top: t.top - (o.height - t.height) / 2 - f, left: (t == null ? void 0 : t.left) + t.width - i + e.offset },
+            bottom: { top: (t == null ? void 0 : t.bottom) - f + e.offset, left: (t == null ? void 0 : t.left) - i },
+            top: { top: t.top - o.height - e.offset - f, left: (t == null ? void 0 : t.left) - i },
+            "bottom-left": { top: (t == null ? void 0 : t.bottom) - f + e.offset, left: (t == null ? void 0 : t.left) + t.width - o.width - i }
+          };
+          l.style.top = c[e.position].top + "px", l.style.left = c[e.position].left + "px";
+        }
+      }), e.autoShowDuration > 0 && (n.value = setTimeout(() => {
+        a.value = !1;
+      }, e.autoShowDuration));
+    }, y = () => {
+      n.value && (clearTimeout(n.value), n.value = null);
     };
-    return (l, t) => (a(), d(C, null, [
-      B("div", {
+    return T({
+      startAutoShow: C,
+      clearAutoTimer: y
+    }), (l, t) => (h(), w(A, null, [
+      D("div", {
         ref_key: "container",
-        ref: f,
+        ref: p,
         class: "tooltip-wrapper",
         onMouseover: _,
-        onMouseout: x
+        onMouseout: B
       }, [
-        S(l.$slots, "default", {}, void 0, !0)
+        V(l.$slots, "default", {}, void 0, !0)
       ], 544),
-      (a(), N(V, { to: "body" }, [
-        A(E, null, {
-          default: I(() => [
-            n.value ? (a(), d("span", {
+      (h(), R(E, { to: "body" }, [
+        I(L, null, {
+          default: M(() => [
+            a.value ? (h(), w("span", {
               key: 0,
               ref_key: "tooltip",
-              ref: i,
-              "data-theme": c(h)().theme ? c(h)().theme : "light",
-              class: R(y.value)
-            }, $(m.text), 11, q)) : M("", !0)
+              ref: r,
+              "data-theme": u(v)().theme ? u(v)().theme : "light",
+              class: j(x.value)
+            }, q(g.text), 11, F)) : $("", !0)
           ]),
           _: 1
         })
@@ -73,5 +101,5 @@ const q = ["data-theme"], K = /* @__PURE__ */ T({
   }
 });
 export {
-  K as default
+  W as default
 };