@mobilon-dev/chotto 0.3.66 → 0.3.67

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-14a39a1d"]]);
 export {
   m as default
 };

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

@@ -1,13 +1,13 @@
-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 A, inject as D, ref as n, computed as T, onUnmounted as R, createElementBlock as d, openBlock as s, Fragment as V, createElementVNode as W, createBlock as z, renderSlot as E, Teleport as I, createVNode as L, Transition as M, withCtx as $, createCommentVNode as j, normalizeStyle as q, normalizeClass as F, unref as g, toDisplayString as P, nextTick as v } from "vue";
 import "../../../hooks/useMessageDraft.js";
 import "../../../hooks/useSearchModel.js";
-import { useTheme as P } from "../../../hooks/useTheme.js";
+import { useTheme as U } 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 G = ["data-theme"], tt = /* @__PURE__ */ A({
   __name: "Tooltip",
   props: {
     text: {
@@ -33,79 +33,86 @@ 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(w, { expose: x }) {
+    const S = D("chatAppId"), { getTheme: y } = U(S), p = n(), a = n(), c = n(!1), u = n(null), r = n(null), e = w, _ = T(() => ({
       tooltip__text: !0,
-      [`tooltip--${o.position}`]: !0
-    })), B = () => {
-      o.trigger !== "auto" && (r.value && (clearTimeout(r.value), r.value = null), r.value = setTimeout(() => {
+      [`tooltip--${e.position}`]: !0
+    })), B = T(() => ({
+      maxWidth: e.maxWidth || void 0
+    })), C = () => {
+      e.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 }
+          if (p.value && a.value) {
+            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, h = {
+              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 },
+              "top-center": { top: t.top - o.height - e.offset - i, left: (t == null ? void 0 : t.left) + t.width / 2 - o.width / 2 - 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 }
             };
-            f.style.top = h[o.position].top + "px", f.style.left = h[o.position].left + "px";
+            f.style.top = h[e.position].top + "px", f.style.left = h[e.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);
+      }, e.delay));
+    }, k = () => {
+      e.trigger !== "auto" && (r.value && (clearTimeout(r.value), r.value = null), c.value = !1, v(() => {
+        const f = g(a);
         f && (f.style.top = "0", f.style.left = "0");
       }));
-    }, S = () => {
+    }, N = () => {
       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 }
+        if (p.value && a.value) {
+          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, h = {
+            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 },
+            "top-center": { top: t.top - o.height - e.offset - i, left: (t == null ? void 0 : t.left) + t.width / 2 - o.width / 2 - 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 }
           };
-          f.style.top = h[o.position].top + "px", f.style.left = h[o.position].left + "px";
+          f.style.top = h[e.position].top + "px", f.style.left = h[e.position].left + "px";
         }
-      }), o.autoShowDuration > 0 && (u.value = setTimeout(() => {
+      }), e.autoShowDuration > 0 && (u.value = setTimeout(() => {
         c.value = !1;
-      }, o.autoShowDuration));
+      }, e.autoShowDuration));
     }, m = () => {
       u.value && (clearTimeout(u.value), u.value = null);
     };
-    return D(() => {
+    return R(() => {
       r.value && clearTimeout(r.value), m();
-    }), d({
-      startAutoShow: S,
+    }), x({
+      startAutoShow: N,
       clearAutoTimer: m
-    }), (f, t) => (s(), T(R, null, [
-      V("div", {
+    }), (f, t) => (s(), d(V, null, [
+      W("div", {
         ref_key: "container",
-        ref: a,
+        ref: p,
         class: "tooltip-wrapper",
-        onMouseover: B,
-        onMouseout: C
+        onMouseover: C,
+        onMouseout: k
       }, [
-        I(f.$slots, "default", {}, void 0, !0)
+        E(f.$slots, "default", {}, void 0, !0)
       ], 544),
-      (s(), E(L, { to: "body" }, [
-        M($, null, {
-          default: j(() => [
-            c.value ? (s(), T("span", {
+      (s(), z(I, { to: "body" }, [
+        L(M, null, {
+          default: $(() => [
+            c.value ? (s(), d("span", {
               key: 0,
               ref_key: "tooltip",
-              ref: p,
+              ref: a,
               "data-theme": g(y)().theme ? g(y)().theme : "light",
-              class: z(_.value)
-            }, F(w.text), 11, U)) : q("", !0)
+              class: F(_.value),
+              style: q(B.value)
+            }, P(w.text), 15, G)) : j("", !0)
           ]),
           _: 1
         })
@@ -114,5 +121,5 @@ const U = ["data-theme"], Z = /* @__PURE__ */ k({
   }
 });
 export {
-  Z as default
+  tt as default
 };

package/dist/components/3_compounds/SideBar/SideBar.vue.js

@@ -1,19 +1,31 @@
-import { toRef as E, computed as T, ref as f, onMounted as W, nextTick as q, onUnmounted as J, watch as K, createElementBlock as a, openBlock as o, normalizeClass as s, createCommentVNode as u, createElementVNode as d, normalizeStyle as O, Fragment as A, renderList as w, createBlock as y, withCtx as k, toDisplayString as M, createVNode as R } from "vue";
-import Q from "../../1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js";
-import F from "../../1_icons/SettingsIcon.vue.js";
-import L from "../../1_atoms/Tooltip/Tooltip.vue.js";
+import { toRef as A, computed as E, ref as f, onMounted as K, nextTick as y, onUnmounted as O, watch as M, createElementBlock as s, openBlock as i, normalizeClass as r, createCommentVNode as l, createElementVNode as c, normalizeStyle as Q, Fragment as R, renderList as N, createBlock as m, withCtx as h, toDisplayString as F, createVNode as L } from "vue";
+import X from "../../1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js";
+import V from "../../1_icons/SettingsIcon.vue.js";
+import k from "../../1_atoms/Tooltip/Tooltip.vue.js";
 /* empty css             */
-import X from "../../../_virtual/_plugin-vue_export-helper.js";
-const Z = ["onClick"], $ = ["src", "alt"], ee = {
+import Z from "../../../_virtual/_plugin-vue_export-helper.js";
+const $ = ["onClick"], tt = ["src", "alt"], et = {
   key: 1,
   class: "sidebar__notification-count"
-}, te = { class: "sidebar__scroll-container" }, ne = ["onClick"], oe = ["src", "alt"], ie = ["src"], ae = { key: 2 }, se = {
+}, ot = { class: "sidebar__scroll-container" }, it = ["onClick"], nt = ["src", "alt"], st = ["src"], at = { key: 2 }, rt = {
   key: 2,
   class: "sidebar__settings-container"
-}, re = {
+}, lt = {
   class: "sidebar__settings-btn",
   type: "button"
-}, le = {
+}, ct = {
+  key: 0,
+  class: "sidebar__settings-indicator-anchor"
+}, ut = {
+  key: 1,
+  class: "sidebar__settings-indicator"
+}, dt = {
+  key: 0,
+  class: "sidebar__settings-indicator-anchor"
+}, ft = {
+  key: 1,
+  class: "sidebar__settings-indicator"
+}, _t = {
   __name: "SideBar",
   props: {
     sidebarItems: {
@@ -41,173 +53,234 @@ const Z = ["onClick"], $ = ["src", "alt"], ee = {
       required: !1,
       default: "menu"
       // 'menu' | 'action'
+    },
+    showSettingsIndicator: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    settingsIndicatorTooltip: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /** Длительность автопоказа тултипа индикатора при появлении кружка, мс */
+    settingsIndicatorTooltipAutoShowMs: {
+      type: Number,
+      required: !1,
+      default: 8e3
     }
   },
   emits: ["selectItem", "settingsClick"],
-  setup(i, { emit: N }) {
-    const C = i, m = E(C, "sidebarItems"), p = E(C, "menuActions"), z = N, x = T(
-      () => m.value.filter((e) => e.isFixedBottom).sort((e, t) => t.notificationCount - e.notificationCount)
-    ), V = T(
-      () => m.value.filter((e) => !e.isFixedBottom).sort((e, t) => t.notificationCount - e.notificationCount)
-    ), H = (e) => {
-      const t = m.value.find((n) => n.itemId === e);
-      z("selectItem", t);
-    }, B = (e, t) => {
-      P(e.currentTarget), H(t);
-    }, Y = (e) => {
-      const t = e.split(" ");
-      return t.length > 2 ? t.slice(0, 2).join(" ") : e;
-    }, j = (e) => {
-      console.log("Выбрано действие:", e), typeof e.action == "function" && e.action();
-    }, D = () => {
+  setup(n, { emit: H }) {
+    const _ = n, b = A(_, "sidebarItems"), S = A(_, "menuActions"), T = H, w = E(
+      () => b.value.filter((t) => t.isFixedBottom).sort((t, e) => e.notificationCount - t.notificationCount)
+    ), Y = E(
+      () => b.value.filter((t) => !t.isFixedBottom).sort((t, e) => e.notificationCount - t.notificationCount)
+    ), j = (t) => {
+      const e = b.value.find((o) => o.itemId === t);
+      T("selectItem", e);
+    }, z = (t, e) => {
+      W(t.currentTarget), j(e);
+    }, D = (t) => {
+      const e = t.split(" ");
+      return e.length > 2 ? e.slice(0, 2).join(" ") : t;
+    }, G = (t) => {
+      console.log("Выбрано действие:", t), typeof t.action == "function" && t.action();
+    }, P = () => {
       console.log("Кнопка меню была нажата");
-    }, G = () => {
-      var t;
-      z("settingsClick");
-      const e = (t = p.value) == null ? void 0 : t[0];
-      e && typeof e.action == "function" && !e.disabled && e.action();
-    }, l = f(null), h = f(!1), v = f(0), g = f(40), b = f(!1), I = (e) => {
-      const t = l.value;
-      if (!t || !e) return 0;
-      const n = t.getBoundingClientRect(), r = e.getBoundingClientRect(), U = r.top + r.height / 2 - n.top - g.value / 2;
-      return Math.max(0, U);
-    }, _ = () => {
-      if (!l.value) return;
-      const t = l.value.querySelector(".sidebar__image--active");
-      t ? (v.value = I(t), h.value = !0) : h.value = !1;
-    }, P = (e) => {
+    }, U = () => {
+      var e;
+      T("settingsClick");
+      const t = (e = S.value) == null ? void 0 : e[0];
+      t && typeof t.action == "function" && !t.disabled && t.action();
+    }, u = f(null), p = f(null), I = f(!1), C = f(0), v = f(40), x = f(!1), B = (t) => {
+      const e = u.value;
+      if (!e || !t) return 0;
+      const o = e.getBoundingClientRect(), a = t.getBoundingClientRect(), J = a.top + a.height / 2 - o.top - v.value / 2;
+      return Math.max(0, J);
+    }, g = () => {
+      if (!u.value) return;
+      const e = u.value.querySelector(".sidebar__image--active");
+      e ? (C.value = B(e), I.value = !0) : I.value = !1;
+    }, W = (t) => {
       try {
-        if (!e || !l.value) return;
-        const t = e.querySelector(".sidebar__image");
-        if (!t) return;
-        const n = I(t), r = 12, c = 160;
-        b.value = !0, g.value = r, setTimeout(() => {
-          v.value = n, requestAnimationFrame(() => {
-            g.value = 40, setTimeout(() => {
-              b.value = !1;
-            }, c);
+        if (!t || !u.value) return;
+        const e = t.querySelector(".sidebar__image");
+        if (!e) return;
+        const o = B(e), a = 12, d = 160;
+        x.value = !0, v.value = a, setTimeout(() => {
+          C.value = o, requestAnimationFrame(() => {
+            v.value = 40, setTimeout(() => {
+              x.value = !1;
+            }, d);
           });
-        }, c);
+        }, d);
       } catch {
       }
-    }, S = () => _();
-    return W(() => {
-      var t;
-      q(_), window.addEventListener("resize", S);
-      const e = (t = l.value) == null ? void 0 : t.querySelector(".sidebar__scroll-container");
-      e && e.addEventListener("scroll", _);
-    }), J(() => {
-      var t;
-      window.removeEventListener("resize", S);
-      const e = (t = l.value) == null ? void 0 : t.querySelector(".sidebar__scroll-container");
-      e && e.removeEventListener("scroll", _);
-    }), K(() => m.value.map((e) => e.selected), () => q(_)), (e, t) => (o(), a("div", {
+    }, q = () => g();
+    return K(() => {
+      var e;
+      y(g), window.addEventListener("resize", q);
+      const t = (e = u.value) == null ? void 0 : e.querySelector(".sidebar__scroll-container");
+      t && t.addEventListener("scroll", g);
+    }), O(() => {
+      var e;
+      window.removeEventListener("resize", q);
+      const t = (e = u.value) == null ? void 0 : e.querySelector(".sidebar__scroll-container");
+      t && t.removeEventListener("scroll", g);
+    }), M(() => b.value.map((t) => t.selected), () => y(g)), M(
+      () => _.showSettings && _.showSettingsIndicator && !!_.settingsIndicatorTooltip,
+      (t, e) => {
+        !t || e === !0 || y(() => {
+          y(() => {
+            var o, a;
+            (a = (o = p.value) == null ? void 0 : o.startAutoShow) == null || a.call(o);
+          });
+        });
+      },
+      { flush: "post", immediate: !0 }
+    ), (t, e) => (i(), s("div", {
       ref_key: "containerRef",
-      ref: l,
-      class: s(["sidebar__container", { "sidebar-horizontal__container": i.horizontal }])
+      ref: u,
+      class: r(["sidebar__container", { "sidebar-horizontal__container": n.horizontal }])
     }, [
-      !i.horizontal && h.value ? (o(), a("span", {
+      !n.horizontal && I.value ? (i(), s("span", {
         key: 0,
-        class: s(["sidebar__selected-bar", { "is-animating": b.value }]),
-        style: O({ top: v.value + "px", height: g.value + "px" })
-      }, null, 6)) : u("", !0),
-      x.value.length > 0 ? (o(), a("ul", {
+        class: r(["sidebar__selected-bar", { "is-animating": x.value }]),
+        style: Q({ top: C.value + "px", height: v.value + "px" })
+      }, null, 6)) : l("", !0),
+      w.value.length > 0 ? (i(), s("ul", {
         key: 1,
-        class: s(["sidebar__list-fixed", { "sidebar-horizontal__list-fixed": i.horizontal }])
+        class: r(["sidebar__list-fixed", { "sidebar-horizontal__list-fixed": n.horizontal }])
       }, [
-        (o(!0), a(A, null, w(x.value, (n, r) => (o(), a("li", {
-          key: r,
-          class: s(["sidebar__item-fixed", { "sidebar-horizontal__item": i.horizontal }]),
-          onClick: (c) => B(c, n.itemId)
+        (i(!0), s(R, null, N(w.value, (o, a) => (i(), s("li", {
+          key: a,
+          class: r(["sidebar__item-fixed", { "sidebar-horizontal__item": n.horizontal }]),
+          onClick: (d) => z(d, o.itemId)
         }, [
-          n.name ? (o(), y(L, {
+          o.name ? (i(), m(k, {
             key: 0,
-            text: Y(n.name),
+            text: D(o.name),
             position: "right",
             offset: 8
           }, {
-            default: k(() => [
-              d("img", {
-                src: n.icon,
-                alt: n.name,
-                class: s(["sidebar__image", {
-                  "sidebar__image--active": n.selected === !0,
-                  "sidebar-horizontal__image": i.horizontal
+            default: h(() => [
+              c("img", {
+                src: o.icon,
+                alt: o.name,
+                class: r(["sidebar__image", {
+                  "sidebar__image--active": o.selected === !0,
+                  "sidebar-horizontal__image": n.horizontal
                 }])
-              }, null, 10, $),
-              t[0] || (t[0] = d("p", null, "Мои", -1))
+              }, null, 10, tt),
+              e[0] || (e[0] = c("p", null, "Мои", -1))
             ]),
             _: 2
-          }, 1032, ["text"])) : u("", !0),
-          n.notificationCount ? (o(), a("span", ee, M(n.notificationCount > 99 ? "99+" : n.notificationCount), 1)) : u("", !0)
-        ], 10, Z))), 128))
-      ], 2)) : u("", !0),
-      d("div", te, [
-        d("ul", {
-          class: s(["sidebar__list", { "sidebar-horizontal__list": i.horizontal }])
+          }, 1032, ["text"])) : l("", !0),
+          o.notificationCount ? (i(), s("span", et, F(o.notificationCount > 99 ? "99+" : o.notificationCount), 1)) : l("", !0)
+        ], 10, $))), 128))
+      ], 2)) : l("", !0),
+      c("div", ot, [
+        c("ul", {
+          class: r(["sidebar__list", { "sidebar-horizontal__list": n.horizontal }])
         }, [
-          (o(!0), a(A, null, w(V.value, (n, r) => (o(), a("li", {
-            key: r,
-            class: s(["sidebar__item", { "sidebar-horizontal__item": i.horizontal }]),
-            onClick: (c) => B(c, n.itemId)
+          (i(!0), s(R, null, N(Y.value, (o, a) => (i(), s("li", {
+            key: a,
+            class: r(["sidebar__item", { "sidebar-horizontal__item": n.horizontal }]),
+            onClick: (d) => z(d, o.itemId)
           }, [
-            n.name ? (o(), y(L, {
+            o.name ? (i(), m(k, {
               key: 0,
-              text: n.name,
+              text: o.name,
               position: "right",
               offset: 8
             }, {
-              default: k(() => [
-                d("img", {
-                  src: n.icon,
-                  alt: n.name,
-                  class: s(["sidebar__image", {
-                    "sidebar__image--active": n.selected === !0,
-                    "sidebar-horizontal__image": i.horizontal
+              default: h(() => [
+                c("img", {
+                  src: o.icon,
+                  alt: o.name,
+                  class: r(["sidebar__image", {
+                    "sidebar__image--active": o.selected === !0,
+                    "sidebar-horizontal__image": n.horizontal
                   }])
-                }, null, 10, oe)
+                }, null, 10, nt)
               ]),
               _: 2
-            }, 1032, ["text"])) : (o(), a("img", {
+            }, 1032, ["text"])) : (i(), s("img", {
               key: 1,
-              src: n.icon,
+              src: o.icon,
               alt: "icon",
-              class: s(["sidebar__image", {
-                "sidebar__image--active": n.selected === !0,
-                "sidebar-horizontal__image": i.horizontal
+              class: r(["sidebar__image", {
+                "sidebar__image--active": o.selected === !0,
+                "sidebar-horizontal__image": n.horizontal
               }])
-            }, null, 10, ie)),
-            n.notificationCount ? (o(), a("span", ae, M(n.notificationCount > 99 ? "99+" : n.notificationCount), 1)) : u("", !0)
-          ], 10, ne))), 128))
+            }, null, 10, st)),
+            o.notificationCount ? (i(), s("span", at, F(o.notificationCount > 99 ? "99+" : o.notificationCount), 1)) : l("", !0)
+          ], 10, it))), 128))
         ], 2)
       ]),
-      i.showSettings ? (o(), a("div", se, [
-        i.settingsButtonMode === "menu" ? (o(), y(Q, {
+      n.showSettings ? (i(), s("div", rt, [
+        n.settingsButtonMode === "menu" ? (i(), m(X, {
           key: 0,
-          actions: p.value,
+          actions: S.value,
           mode: "click",
           "menu-side": "top-right",
-          onClick: j,
-          onButtonClick: D
+          onClick: G,
+          onButtonClick: P
         }, {
-          default: k(() => [
-            d("button", re, [
-              R(F)
+          default: h(() => [
+            c("button", lt, [
+              L(V),
+              n.showSettingsIndicator ? (i(), s("span", ct, [
+                n.settingsIndicatorTooltip ? (i(), m(k, {
+                  key: 0,
+                  ref_key: "settingsIndicatorTooltipRef",
+                  ref: p,
+                  text: n.settingsIndicatorTooltip,
+                  position: "top",
+                  offset: 8,
+                  "max-width": "460px",
+                  "auto-show-duration": n.settingsIndicatorTooltipAutoShowMs
+                }, {
+                  default: h(() => [...e[1] || (e[1] = [
+                    c("span", { class: "sidebar__settings-indicator" }, null, -1)
+                  ])]),
+                  _: 1
+                }, 8, ["text", "auto-show-duration"])) : (i(), s("span", ut))
+              ])) : l("", !0)
             ])
           ]),
           _: 1
-        }, 8, ["actions"])) : (o(), a("button", {
+        }, 8, ["actions"])) : (i(), s("button", {
           key: 1,
           class: "sidebar__settings-btn",
           type: "button",
-          onClick: G
+          onClick: U
         }, [
-          R(F)
+          L(V),
+          n.showSettingsIndicator ? (i(), s("span", dt, [
+            n.settingsIndicatorTooltip ? (i(), m(k, {
+              key: 0,
+              ref_key: "settingsIndicatorTooltipRef",
+              ref: p,
+              text: n.settingsIndicatorTooltip,
+              position: "top",
+              offset: 8,
+              "max-width": "460px",
+              "auto-show-duration": n.settingsIndicatorTooltipAutoShowMs
+            }, {
+              default: h(() => [...e[2] || (e[2] = [
+                c("span", { class: "sidebar__settings-indicator" }, null, -1)
+              ])]),
+              _: 1
+            }, 8, ["text", "auto-show-duration"])) : (i(), s("span", ft))
+          ])) : l("", !0)
         ]))
-      ])) : u("", !0)
+      ])) : l("", !0)
     ], 2));
   }
-}, ge = /* @__PURE__ */ X(le, [["__scopeId", "data-v-eb5412c6"]]);
+}, kt = /* @__PURE__ */ Z(_t, [["__scopeId", "data-v-af365b7c"]]);
 export {
-  ge as default
+  kt as default
 };