@mobilon-dev/chotto 0.3.66 → 0.3.68

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

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

@@ -1,18 +1,24 @@
-import { defineComponent as k, inject as N, ref as n, computed as A, onUnmounted as D, createElementBlock as T, openBlock as s, 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 g, toDisplayString as F, nextTick as v } from "vue";
+import { defineComponent as et, inject as ot, ref as u, computed as _, onUnmounted as lt, createElementBlock as h, openBlock as c, Fragment as I, createElementVNode as it, createBlock as rt, renderSlot as at, Teleport as nt, createVNode as ut, Transition as st, withCtx as ct, createCommentVNode as ft, renderList as mt, normalizeStyle as pt, normalizeClass as ht, unref as S, toDisplayString as vt, nextTick as M } from "vue";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
-import { useTheme as P } from "../../../hooks/useTheme.js";
+import { useTheme as gt } from "../../../hooks/useTheme.js";
 /* empty css                              */
 /* empty css                                              */
 import "../../../node_modules/linkifyjs/dist/linkify.js";
 import "../../../node_modules/linkify-string/dist/linkify-string.js";
 import "../../../functions/parseMarkdown.js";
-const U = ["data-theme"], Z = /* @__PURE__ */ k({
+const Tt = { key: 0 }, dt = ["data-theme"], yt = 6, wt = 120, Dt = /* @__PURE__ */ et({
   __name: "Tooltip",
   props: {
     text: {
       type: String,
-      required: !0
+      required: !1,
+      default: ""
+    },
+    texts: {
+      type: Array,
+      required: !1,
+      default: () => []
     },
     position: {
       type: String,
@@ -33,79 +39,124 @@ const U = ["data-theme"], Z = /* @__PURE__ */ k({
     delay: {
       type: Number,
       default: 600
+    },
+    maxWidth: {
+      type: String,
+      default: ""
     }
   },
-  setup(w, { expose: d }) {
-    const x = N("chatAppId"), { getTheme: y } = P(x), a = n(), p = n(), c = n(!1), u = n(null), r = n(null), o = w, _ = A(() => ({
+  setup(N, { expose: P }) {
+    const v = ot("chatAppId"), { getTheme: A } = gt(v), g = u(), f = u([]), s = u(!1), m = u(null), n = u(null), i = u(null), T = u(!1), d = u(!1), e = N, $ = _(() => ({
       tooltip__text: !0,
-      [`tooltip--${o.position}`]: !0
-    })), B = () => {
-      o.trigger !== "auto" && (r.value && (clearTimeout(r.value), r.value = null), r.value = setTimeout(() => {
-        c.value = !0, v(() => {
-          if (a.value && p.value) {
-            const f = p.value, t = a.value.getBoundingClientRect(), e = p.value.getBoundingClientRect(), l = e.left < 0 ? e.left : 0, i = e.top < 0 ? e.top : 0, h = {
-              left: { top: t.top - (e.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) - e.width - l - o.offset },
-              right: { top: t.top - (e.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) + t.width - l + o.offset },
-              bottom: { top: (t == null ? void 0 : t.bottom) - i + o.offset, left: (t == null ? void 0 : t.left) - l },
-              "bottom-center": { top: (t == null ? void 0 : t.bottom) - i + o.offset, left: (t == null ? void 0 : t.left) + t.width / 2 - e.width / 2 - l },
-              top: { top: t.top - e.height - o.offset - i, left: (t == null ? void 0 : t.left) - l },
-              "top-center": { top: t.top - e.height - o.offset - i, left: (t == null ? void 0 : t.left) + t.width / 2 - e.width / 2 - l },
-              "bottom-left": { top: (t == null ? void 0 : t.bottom) - i + o.offset, left: (t == null ? void 0 : t.left) + t.width - e.width - l }
-            };
-            f.style.top = h[o.position].top + "px", f.style.left = h[o.position].left + "px";
-          }
-        }), r.value = null;
-      }, o.delay));
-    }, C = () => {
-      o.trigger !== "auto" && (r.value && (clearTimeout(r.value), r.value = null), c.value = !1, v(() => {
-        const f = g(p);
-        f && (f.style.top = "0", f.style.left = "0");
-      }));
-    }, S = () => {
-      m(), c.value = !0, v(() => {
-        if (a.value && p.value) {
-          const f = p.value, t = a.value.getBoundingClientRect(), e = p.value.getBoundingClientRect(), l = e.left < 0 ? e.left : 0, i = e.top < 0 ? e.top : 0, h = {
-            left: { top: t.top - (e.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) - e.width - l - o.offset },
-            right: { top: t.top - (e.height - t.height) / 2 - i, left: (t == null ? void 0 : t.left) + t.width - l + o.offset },
-            bottom: { top: (t == null ? void 0 : t.bottom) - i + o.offset, left: (t == null ? void 0 : t.left) - l },
-            "bottom-center": { top: (t == null ? void 0 : t.bottom) - i + o.offset, left: (t == null ? void 0 : t.left) + t.width / 2 - e.width / 2 - l },
-            top: { top: t.top - e.height - o.offset - i, left: (t == null ? void 0 : t.left) - l },
-            "top-center": { top: t.top - e.height - o.offset - i, left: (t == null ? void 0 : t.left) + t.width / 2 - e.width / 2 - l },
-            "bottom-left": { top: (t == null ? void 0 : t.bottom) - i + o.offset, left: (t == null ? void 0 : t.left) + t.width - e.width - l }
-          };
-          f.style.top = h[o.position].top + "px", f.style.left = h[o.position].left + "px";
+      [`tooltip--${e.position}`]: !0
+    })), W = _(() => ({
+      maxWidth: e.maxWidth || void 0
+    })), R = _(() => {
+      const t = Array.isArray(e.texts) ? e.texts.map((o) => String(o ?? "").trim()).filter(Boolean) : [];
+      return t.length > 0 ? t : e.text ? [e.text] : [];
+    }), H = (t, o) => {
+      const l = o.left < 0 ? o.left : 0, r = o.top < 0 ? o.top : 0;
+      return {
+        left: {
+          top: t.top - (o.height - t.height) / 2 - r,
+          left: t.left - o.width - l - e.offset
+        },
+        right: {
+          top: t.top - (o.height - t.height) / 2 - r,
+          left: t.left + t.width - l + e.offset
+        },
+        bottom: {
+          top: t.bottom - r + e.offset,
+          left: t.left - l
+        },
+        "bottom-center": {
+          top: t.bottom - r + e.offset,
+          left: t.left + t.width / 2 - o.width / 2 - l
+        },
+        top: {
+          top: t.top - o.height - e.offset - r,
+          left: t.left - l
+        },
+        "top-center": {
+          top: t.top - o.height - e.offset - r,
+          left: t.left + t.width / 2 - o.width / 2 - l
+        },
+        "bottom-left": {
+          top: t.bottom - r + e.offset,
+          left: t.left + t.width - o.width - l
         }
-      }), o.autoShowDuration > 0 && (u.value = setTimeout(() => {
-        c.value = !1;
-      }, o.autoShowDuration));
-    }, m = () => {
-      u.value && (clearTimeout(u.value), u.value = null);
+      }[e.position];
+    }, L = () => {
+      if (!g.value || f.value.length === 0) return;
+      const t = g.value.getBoundingClientRect(), o = e.position.startsWith("top"), l = 8, r = v ? document.getElementById(v) : null, a = r == null ? void 0 : r.getBoundingClientRect(), K = (a == null ? void 0 : a.top) ?? 0, U = (a == null ? void 0 : a.left) ?? 0, X = (a == null ? void 0 : a.right) ?? window.innerWidth, Y = (a == null ? void 0 : a.bottom) ?? window.innerHeight;
+      f.value.forEach((w, J) => {
+        const p = w.getBoundingClientRect(), x = H(t, p), C = J * (p.height + yt), Q = o ? x.top - C : x.top + C, E = K + l, Z = Y - p.height - l, D = U + l, b = X - p.width - l, B = Math.min(Math.max(Q, E), Math.max(E, Z)), tt = Math.min(Math.max(x.left, D), Math.max(D, b));
+        w.style.top = `${B}px`, w.style.left = `${tt}px`;
+      });
+    }, V = () => {
+      e.trigger !== "auto" && (n.value && (clearTimeout(n.value), n.value = null), i.value && (clearTimeout(i.value), i.value = null), n.value = setTimeout(() => {
+        s.value = !0, M(() => {
+          L();
+        }), n.value = null;
+      }, e.delay));
+    }, q = () => {
+      e.trigger !== "auto" && (n.value && (clearTimeout(n.value), n.value = null), i.value && (clearTimeout(i.value), i.value = null), s.value = !1, M(() => {
+        S(f).forEach((o) => {
+          o.style.top = "0", o.style.left = "0";
+        });
+      }));
+    }, k = () => {
+      e.trigger !== "auto" && (i.value && clearTimeout(i.value), i.value = setTimeout(() => {
+        !T.value && !d.value && q();
+      }, wt));
+    }, z = () => {
+      T.value = !0, V();
+    }, O = () => {
+      T.value = !1, k();
+    }, j = () => {
+      d.value = !0, i.value && (clearTimeout(i.value), i.value = null);
+    }, F = () => {
+      d.value = !1, k();
+    }, G = () => {
+      y(), s.value = !0, M(() => {
+        L();
+      }), e.autoShowDuration > 0 && (m.value = setTimeout(() => {
+        s.value = !1;
+      }, e.autoShowDuration));
+    }, y = () => {
+      m.value && (clearTimeout(m.value), m.value = null);
     };
-    return D(() => {
-      r.value && clearTimeout(r.value), m();
-    }), d({
-      startAutoShow: S,
-      clearAutoTimer: m
-    }), (f, t) => (s(), T(R, null, [
-      V("div", {
+    return lt(() => {
+      n.value && clearTimeout(n.value), i.value && clearTimeout(i.value), y();
+    }), P({
+      startAutoShow: G,
+      clearAutoTimer: y
+    }), (t, o) => (c(), h(I, null, [
+      it("div", {
         ref_key: "container",
-        ref: a,
+        ref: g,
         class: "tooltip-wrapper",
-        onMouseover: B,
-        onMouseout: C
+        onMouseenter: z,
+        onMouseleave: O
       }, [
-        I(f.$slots, "default", {}, void 0, !0)
+        at(t.$slots, "default", {}, void 0, !0)
       ], 544),
-      (s(), E(L, { to: "body" }, [
-        M($, null, {
-          default: j(() => [
-            c.value ? (s(), T("span", {
-              key: 0,
-              ref_key: "tooltip",
-              ref: p,
-              "data-theme": g(y)().theme ? g(y)().theme : "light",
-              class: z(_.value)
-            }, F(w.text), 11, U)) : q("", !0)
+      (c(), rt(nt, { to: "body" }, [
+        ut(st, null, {
+          default: ct(() => [
+            s.value ? (c(), h("div", Tt, [
+              (c(!0), h(I, null, mt(R.value, (l, r) => (c(), h("span", {
+                key: `${l}-${r}`,
+                ref_for: !0,
+                ref_key: "tooltipItems",
+                ref: f,
+                "data-theme": S(A)().theme ? S(A)().theme : "light",
+                class: ht($.value),
+                style: pt(W.value),
+                onMouseenter: j,
+                onMouseleave: F
+              }, vt(l), 47, dt))), 128))
+            ])) : ft("", !0)
           ]),
           _: 1
         })
@@ -114,5 +165,5 @@ const U = ["data-theme"], Z = /* @__PURE__ */ k({
   }
 });
 export {
-  Z as default
+  Dt as default
 };