@mobilon-dev/chotto 0.3.67 → 0.3.69

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

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