@mobilon-dev/chotto 0.3.61 → 0.3.63

package/dist/components/3_compounds/Feed/Feed.vue2.js

@@ -1,4 +1,4 @@
-import { defineComponent as fe, ref as k, computed as i, inject as w, unref as o, watch as ge, nextTick as j, onMounted as ye, createElementBlock as c, openBlock as l, Fragment as K, createBlock as f, createCommentVNode as u, normalizeStyle as x, renderSlot as L, withDirectives as pe, createVNode as g, createElementVNode as h, vShow as be, Transition as v, withCtx as S, renderList as ke, resolveDynamicComponent as he, toDisplayString as ve, Teleport as Se } from "vue";
+import { defineComponent as me, ref as k, computed as l, inject as w, unref as o, watch as fe, nextTick as j, onMounted as ge, createElementBlock as c, openBlock as i, createVNode as g, createBlock as f, createCommentVNode as u, normalizeStyle as K, renderSlot as x, withDirectives as ye, createElementVNode as h, vShow as pe, Transition as v, withCtx as S, Fragment as be, renderList as ke, resolveDynamicComponent as he, toDisplayString as ve, Teleport as Se } from "vue";
 import Re from "../../2_feed_elements/DateMessageSticky/DateMessageSticky.vue.js";
 import Be from "../../2_feed_elements/BaseReplyMessage/BaseReplyMessage.vue.js";
 import Ie from "../../2_feed_elements/MessageKeyboard/MessageKeyboard.vue.js";
@@ -17,10 +17,10 @@ import { useFeedScrollTo as Oe } from "./composables/useFeedScrollTo.js";
 import { useStickyDate as Ve } from "./composables/useStickyDate.js";
 import { throttle as $e } from "./functions/throttle.js";
 import qe from "./assets/chat-background.svg.js";
-const ze = ["id"], Ee = { class: "message-feed__loading" }, Pe = ["id", "data-timestamp", "onDblclick"], We = {
+const ze = { class: "message-feed-wrapper" }, Ee = ["id"], Pe = { class: "message-feed__loading" }, We = ["id", "data-timestamp", "onDblclick"], Ne = { style: { margin: "auto" } }, Ge = {
   key: 0,
   class: "message-feed__unread-amount"
-}, Ne = { style: { margin: "auto" } }, ct = /* @__PURE__ */ fe({
+}, ut = /* @__PURE__ */ me({
   __name: "Feed",
   props: {
     objects: {
@@ -98,24 +98,24 @@ const ze = ["id"], Ee = { class: "message-feed__loading" }, Pe = ["id", "data-ti
     "smsInvite",
     "delimiterRead"
   ],
-  setup(e, { emit: O }) {
+  setup(e, { emit: L }) {
     const a = e, b = k(), r = k(), R = k(), {
-      isShowButton: V,
-      isKeyboardPlace: $,
-      checkButtonVisibility: q
+      isShowButton: O,
+      isKeyboardPlace: V,
+      checkButtonVisibility: $
     } = Fe({
       feedRef: r,
       keyboardRef: R
-    }), { componentsMap: z } = Ce(), E = i(() => a.reactionsEnabled), { groupedObjects: P } = De({
-      objects: i(() => a.objects)
-    }), y = w("chatAppId"), B = w("selectedChat", void 0), I = i(() => {
+    }), { componentsMap: q } = Ce(), z = l(() => a.reactionsEnabled), { groupedObjects: E } = De({
+      objects: l(() => a.objects)
+    }), y = w("chatAppId"), B = w("selectedChat", void 0), I = l(() => {
       if (B)
         return o(B);
     });
-    function W(s) {
+    function P(s) {
       return s.timestamp;
     }
-    function N(s) {
+    function W(s) {
       var m;
       const n = s;
       if (!n.dialogId || !((m = I.value) != null && m.dialogs))
@@ -123,65 +123,65 @@ const ze = ["id"], Ee = { class: "message-feed__loading" }, Pe = ["id", "data-ti
       const t = I.value.dialogs.find((p) => p.dialogId === n.dialogId);
       return t == null ? void 0 : t.channelId;
     }
-    const d = O, {
-      checkScrollPosition: G,
+    const d = L, {
+      checkScrollPosition: N,
       startScrollWatch: T,
       stopScrollWatch: A,
-      resetAllowFlags: U
+      resetAllowFlags: G
     } = je({
       feedRef: r,
       emit: d,
-      isLoadingMoreRef: i(() => a.isLoadingMore)
+      isLoadingMoreRef: l(() => a.isLoadingMore)
     }), {
       getMessage: M,
-      messageAction: H,
-      handleClickReplied: J,
-      feedObjectDoubleClick: Q,
-      handleResetReply: X
+      messageAction: U,
+      handleClickReplied: H,
+      feedObjectDoubleClick: J,
+      handleResetReply: Q
     } = xe({
       enableDoubleClickReply: a.enableDoubleClickReply,
       emit: d
     });
-    function Y(s) {
+    function X(s) {
       d("smsInvite", s);
     }
-    function Z(s) {
+    function Y(s) {
       d("delimiterRead", s);
     }
     const {
-      showKeyboard: _,
-      keyboardAction: ee,
-      feedKeyboardAction: te
+      showKeyboard: Z,
+      keyboardAction: _,
+      feedKeyboardAction: ee
     } = we({
-      isKeyboardPlace: $,
-      objects: i(() => a.objects),
+      isKeyboardPlace: V,
+      objects: l(() => a.objects),
       emit: d
     }), {
-      showStickyDate: oe,
-      stickyDateText: se,
-      show: ne
+      showStickyDate: te,
+      stickyDateText: oe,
+      show: se
     } = Ve({
       feedRef: r,
       trackingObjects: b
     }), {
-      isInitialized: ae,
-      performScrollToBottom: le,
+      isInitialized: ne,
+      performScrollToBottom: ae,
       ensureScrollToBottom: F,
       initializeScroll: ie,
-      smoothScrollToBottom: re
+      smoothScrollToBottom: le
     } = Le({
       feedRef: r,
-      objectsRef: i(() => a.objects),
-      scrollToBottomRef: i(() => a.scrollToBottom)
-    }), C = i(() => a.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qe)}`);
+      objectsRef: l(() => a.objects),
+      scrollToBottomRef: l(() => a.scrollToBottom)
+    }), C = l(() => a.chatBackground ?? `data:image/svg+xml;charset=utf-8,${encodeURIComponent(qe)}`);
     function D(s = !0) {
-      q(), G(s), ne();
+      $(), N(s), se();
     }
-    const de = $e(() => D(), 250);
-    function ce() {
-      d("forceScrollToBottom"), re();
+    const re = $e(() => D(), 250);
+    function de() {
+      d("forceScrollToBottom"), le();
     }
-    function ue(s) {
+    function ce(s) {
       const n = a.objects;
       if (s.startsWith("mid-")) {
         const t = parseInt(s.slice(4), 10);
@@ -189,30 +189,30 @@ const ze = ["id"], Ee = { class: "message-feed__loading" }, Pe = ["id", "data-ti
       }
       return n.find((t) => t.messageId === s);
     }
-    const { restartObserving: me } = Ke({
+    const { restartObserving: ue } = Ke({
       trackingObjects: b,
       chatAppId: y,
-      getMessageById: ue,
+      getMessageById: ce,
       onMessageVisible: (s) => d("messageVisible", s)
     });
-    return ge(
+    return fe(
       () => a.objects,
       () => {
         j(() => {
           requestAnimationFrame(() => {
-            U(), D(!1), b.value = document.querySelectorAll(".tracking-message"), me();
+            G(), D(!1), b.value = document.querySelectorAll(".tracking-message"), ue();
           });
         });
       },
       { immediate: !0 }
     ), Oe({
-      targetIdRef: i(() => a.scrollTo),
+      targetIdRef: l(() => a.scrollTo),
       feedContainerId: `feed-container-${y}`
-    }), ye(() => {
+    }), ge(() => {
       j(() => {
-        a.objects.length > 0 && !ae.value && ie();
+        a.objects.length > 0 && !ne.value && ie();
         const s = new ResizeObserver(() => {
-          a.scrollToBottom && (le(), setTimeout(() => {
+          a.scrollToBottom && (ae(), setTimeout(() => {
             F();
           }, 200), setTimeout(() => {
             F();
@@ -220,63 +220,63 @@ const ze = ["id"], Ee = { class: "message-feed__loading" }, Pe = ["id", "data-ti
         });
         r.value && s.observe(r.value);
       });
-    }), (s, n) => (l(), c(K, null, [
-      e.objects.length > 0 || e.typing ? (l(), c("div", {
+    }), (s, n) => (i(), c("div", ze, [
+      e.objects.length > 0 || e.typing ? (i(), c("div", {
         key: 0,
         id: "feed-container-" + o(y),
         ref_key: "refFeed",
         ref: r,
         class: "message-feed",
-        style: x({ backgroundImage: `url(${C.value})` }),
-        onScroll: n[0] || (n[0] = (t) => o(de)()),
+        style: K({ backgroundImage: `url(${C.value})` }),
+        onScroll: n[0] || (n[0] = (t) => o(re)()),
         onMousedown: n[1] || (n[1] = //@ts-ignore
         (...t) => o(T) && o(T)(...t)),
         onMouseup: n[2] || (n[2] = //@ts-ignore
         (...t) => o(A) && o(A)(...t))
       }, [
-        L(s.$slots, "prepend", {}, void 0, !0),
-        pe(h("div", Ee, [
+        x(s.$slots, "prepend", {}, void 0, !0),
+        ye(h("div", Pe, [
           g(Me, {
             "is-loading": e.isLoadingMore,
             size: "small",
             position: "top"
           }, null, 8, ["is-loading"])
         ], 512), [
-          [be, e.isLoadingMore]
+          [pe, e.isLoadingMore]
         ]),
         g(v, null, {
           default: S(() => [
-            o(oe) && !e.isLoadingMore ? (l(), f(Re, {
+            o(te) && !e.isLoadingMore ? (i(), f(Re, {
               key: 0,
               class: "message-feed__sticky-date",
-              text: o(se)
+              text: o(oe)
             }, null, 8, ["text"])) : u("", !0)
           ]),
           _: 1
         }),
-        (l(!0), c(K, null, ke(o(P), (t, m) => (l(), c("div", {
+        (i(!0), c(be, null, ke(o(E), (t, m) => (i(), c("div", {
           id: "msg-" + (t.messageId ?? "mid-" + m),
           key: t.messageId ?? "mid-" + m,
-          "data-timestamp": W(t),
+          "data-timestamp": P(t),
           class: "tracking-message",
-          onDblclick: (p) => o(Q)(p, t)
+          onDblclick: (p) => o(J)(p, t)
         }, [
-          (l(), f(he(o(z)(t.type)), {
+          (i(), f(he(o(q)(t.type)), {
             key: t.messageId ?? "mid-" + m,
             class: "message-feed__message",
             message: t,
             "apply-style": e.applyStyle,
             "is-first-in-series": t.isFirstInSeries,
-            "reactions-enabled": E.value,
+            "reactions-enabled": z.value,
             "subtext-tooltip-data": e.subtextTooltipData,
-            channel: N(t),
-            onAction: o(H),
-            onReply: o(J),
-            onSmsInvite: (p) => Y(t),
-            onRead: Z
+            channel: W(t),
+            onAction: o(U),
+            onReply: o(H),
+            onSmsInvite: (p) => X(t),
+            onRead: Y
           }, null, 40, ["message", "apply-style", "is-first-in-series", "reactions-enabled", "subtext-tooltip-data", "channel", "onAction", "onReply", "onSmsInvite"]))
-        ], 40, Pe))), 128)),
-        e.typing ? (l(), f(Ae, {
+        ], 40, We))), 128)),
+        e.typing ? (i(), f(Ae, {
           key: 0,
           message: {
             subText: e.typing.title,
@@ -285,61 +285,61 @@ const ze = ["id"], Ee = { class: "message-feed__loading" }, Pe = ["id", "data-ti
         }, null, 8, ["message"])) : u("", !0),
         g(v, null, {
           default: S(() => [
-            o(_) ? (l(), f(Ie, {
+            o(Z) ? (i(), f(Ie, {
               key: 0,
               ref_key: "keyboardRef",
               ref: R,
               class: "message-feed__keyboard",
               keyboard: e.objects[e.objects.length - 1].keyboard,
               align: e.keyboardAlign,
-              onAction: o(ee)
+              onAction: o(_)
             }, null, 8, ["keyboard", "align", "onAction"])) : u("", !0)
           ]),
           _: 1
         }),
-        g(v, null, {
-          default: S(() => [
-            o(V) ? (l(), c("button", {
-              key: 0,
-              class: "message-feed__button-down",
-              onClick: ce
-            }, [
-              e.buttonParams ? (l(), c("div", We, ve(e.buttonParams.unreadAmount), 1)) : u("", !0),
-              n[3] || (n[3] = h("span", { class: "pi pi-angle-down message-feed__icon-down" }, null, -1))
-            ])) : u("", !0)
-          ]),
-          _: 1
-        }),
-        e.feedKeyboards && e.feedKeyboards.length > 0 ? (l(), f(Te, {
+        e.feedKeyboards && e.feedKeyboards.length > 0 ? (i(), f(Te, {
           key: 1,
           buttons: e.feedKeyboards,
           align: e.feedKeyboardAlign,
-          onAction: o(te)
+          onAction: o(ee)
         }, null, 8, ["buttons", "align", "onAction"])) : u("", !0)
-      ], 44, ze)) : (l(), c("div", {
+      ], 44, Ee)) : (i(), c("div", {
         key: 1,
         ref_key: "refFeed",
         ref: r,
         class: "message-feed",
-        style: x({ backgroundImage: `url(${C.value})` })
+        style: K({ backgroundImage: `url(${C.value})` })
       }, [
         h("div", Ne, [
-          L(s.$slots, "empty-feed", {}, void 0, !0)
+          x(s.$slots, "empty-feed", {}, void 0, !0)
         ])
       ], 4)),
-      o(M)().reply ? (l(), f(Se, {
+      g(v, null, {
+        default: S(() => [
+          o(O) ? (i(), c("button", {
+            key: 0,
+            class: "message-feed__button-down",
+            onClick: de
+          }, [
+            e.buttonParams ? (i(), c("div", Ge, ve(e.buttonParams.unreadAmount), 1)) : u("", !0),
+            n[3] || (n[3] = h("span", { class: "pi pi-angle-down message-feed__icon-down" }, null, -1))
+          ])) : u("", !0)
+        ]),
+        _: 1
+      }),
+      o(M)().reply ? (i(), f(Se, {
         key: 2,
         to: "#chat-input-reply-line-" + o(y)
       }, [
         g(Be, {
           class: "chat-input-reply",
           message: o(M)().reply,
-          onReset: o(X)
+          onReset: o(Q)
         }, null, 8, ["message", "onReset"])
       ], 8, ["to"])) : u("", !0)
-    ], 64));
+    ]));
   }
 });
 export {
-  ct as default
+  ut as default
 };

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

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