@mobilon-dev/chotto 0.3.62 → 0.3.63

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
 };