@dv.net/ui-kit 7.5.9 → 7.5.10

package/dist/assets/UiLayoutMenu.vue_vue_type_script_setup_true_lang.s_cerqGK.js

@@ -0,0 +1,71 @@
+import { defineComponent as $, computed as c, createElementBlock as l, openBlock as u, normalizeClass as B, Fragment as v, renderList as y, createVNode as g } from "vue";
+import { _ as R } from "./UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.CDnwiaSr.js";
+import "./style.C3xG1ALc.js";
+import { useRoute as C } from "vue-router";
+const L = /* @__PURE__ */ $({
+  __name: "UiLayoutMenu",
+  props: {
+    routeItems: {},
+    collapsed: { type: Boolean, default: !1 }
+  },
+  emits: ["selected"],
+  setup(k) {
+    const a = k, p = C(), h = (e) => (e.length > 1 ? e.replace(/\/+$/, "") : e).toLowerCase(), M = c(() => {
+      const e = (r) => {
+        let t = [];
+        return r.forEach((o) => {
+          t.push(o), o.children?.length && (t = t.concat(e(o.children)));
+        }), t;
+      };
+      return e(a.routeItems);
+    }), m = c(() => {
+      function e(r, t, o = []) {
+        for (const n of t)
+          if (n.children && n.children.length > 0 && (n.children.some((i) => i?.path === r) || e(r, n.children, o)))
+            return o.push(n?.path), o;
+        return null;
+      }
+      return e(p?.path, a.routeItems);
+    }), d = c(() => {
+      const e = h(p.path);
+      let r = null;
+      const t = (o) => {
+        o.forEach((n) => {
+          const s = h(n.path), f = s === e, i = s !== "/" && e.startsWith(`${s}/`);
+          (f || i) && (!r || s.length > r.length) && (r = s), n.children?.length && t(n.children);
+        });
+      };
+      return t(a.routeItems), r;
+    });
+    return (e, r) => (u(), l("ul", {
+      class: B(["ui-layout-menu", { "is-collapsed": e.collapsed }])
+    }, [
+      e.collapsed ? (u(!0), l(v, { key: 0 }, y(M.value, (t) => (u(), l("li", {
+        key: t?.path
+      }, [
+        g(R, {
+          "route-item": t,
+          collapsed: e.collapsed,
+          "route-items": e.routeItems,
+          parrentRoutes: m.value,
+          "active-menu-path": d.value,
+          onSelected: r[0] || (r[0] = (o) => e.$emit("selected", o))
+        }, null, 8, ["route-item", "collapsed", "route-items", "parrentRoutes", "active-menu-path"])
+      ]))), 128)) : (u(!0), l(v, { key: 1 }, y(e.routeItems, (t) => (u(), l("li", {
+        key: t?.path
+      }, [
+        g(R, {
+          "route-item": t,
+          collapsed: e.collapsed,
+          "route-items": e.routeItems,
+          parrentRoutes: m.value,
+          "active-menu-path": d.value,
+          onSelected: r[1] || (r[1] = (o) => e.$emit("selected", o))
+        }, null, 8, ["route-item", "collapsed", "route-items", "parrentRoutes", "active-menu-path"])
+      ]))), 128))
+    ], 2));
+  }
+});
+export {
+  L as _
+};

package/dist/assets/{UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.DFKZwWfN.js → UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.CDnwiaSr.js}

@@ -1,8 +1,7 @@
-import { defineComponent as z, inject as A, ref as N, computed as g, resolveComponent as U, createElementBlock as m, openBlock as t, Fragment as I, createBlock as s, createCommentVNode as a, resolveDynamicComponent as C, withModifiers as L, withCtx as V, createElementVNode as B, withKeys as E, unref as p, normalizeClass as w, withDirectives as v, createVNode as S, vShow as y, toDisplayString as M, renderList as K } from "vue";
+import { defineComponent as A, inject as D, ref as O, computed as M, resolveComponent as b, createElementBlock as m, openBlock as o, Fragment as I, createBlock as s, createCommentVNode as u, resolveDynamicComponent as k, withModifiers as P, withCtx as N, createElementVNode as S, withKeys as U, unref as p, normalizeClass as C, withDirectives as v, createVNode as w, vShow as h, toDisplayString as g, renderList as V } from "vue";
 import { _ as R } from "./UiIcon.vue_vue_type_script_setup_true_lang.DFsApq5s.js";
 /* empty css                                                */
-import { useRoute as j } from "vue-router";
-import { _ as F } from "./UiAnimation.vue_vue_type_script_setup_true_lang.DaVsSmL9.js";
+import { _ as E } from "./UiAnimation.vue_vue_type_script_setup_true_lang.DaVsSmL9.js";
 import "./style.C3xG1ALc.js";
 /* empty css                                                        */
 import "../config/index.js";
@@ -25,7 +24,8 @@ import "../components/UiDatepicker/composables/useDatePickerPresets.js";
 /* empty css                                                    */
 /* empty css                                                  */
 /* empty css                                                      */
-import { menuProvideDefault as H } from "../components/UiLayout/types.js";
+import { menuProvideDefault as F } from "../components/UiLayout/types.js";
+import "vue-router";
 /* empty css                                                */
 /* empty css                                                 */
 /* empty css                                                      */
@@ -33,135 +33,135 @@ import { menuProvideDefault as H } from "../components/UiLayout/types.js";
 /* empty css                                                */
 /* empty css                                                    */
 /* empty css                                                               */
-import { w as q } from "./index.DeYcP251.js";
-const G = {
+import { w as K } from "./index.DeYcP251.js";
+const j = {
   key: 3,
   class: "ui-layout-menu-item__indicator"
-}, J = {
+}, H = {
   key: 0,
   class: "ui-layout-menu"
-}, Pe = /* @__PURE__ */ z({
+}, ge = /* @__PURE__ */ A({
   __name: "UiLayoutMenuItem",
   props: {
     routeItem: {},
     collapsed: { type: Boolean },
     parrentRoutes: {},
-    routeItems: {}
+    routeItems: {},
+    activeMenuPath: {}
   },
   emits: ["selected"],
-  setup(P) {
-    const n = P, { onMenuItemSelect: c } = A("menu") || H, h = j(), u = N(n.parrentRoutes?.includes(n.routeItem?.path)), f = g(() => n.routeItem?.meta?.isButton), i = g(() => {
-      const { path: e, meta: r, children: k } = n.routeItem, o = !!r?.isChildren, d = e?.toLowerCase(), O = h?.matched.map((l) => l.path?.toLowerCase());
-      if (k?.length)
-        return {
-          isSelected: O.includes(d),
-          isChildren: o
-        };
-      const $ = h?.path.split("/").map((l) => l.toLowerCase()), b = d.split("/")[1];
+  setup(B) {
+    const t = B, { onMenuItemSelect: c } = D("menu") || F, a = O(t.parrentRoutes?.includes(t.routeItem?.path)), y = M(() => t.routeItem?.meta?.isButton), r = M(() => {
+      const { path: e, meta: i } = t.routeItem, f = !!i?.isChildren, n = (l) => (l.length > 1 ? l.replace(/\/+$/, "") : l).toLowerCase(), d = n(e), $ = (t.activeMenuPath ? n(t.activeMenuPath) : null) === d, z = !!t.parrentRoutes?.some(
+        (l) => n(l) === d
+      );
       return {
-        isSelected: o ? e === h?.path : $.some((l) => l === b),
-        isChildren: o
+        // Parent items are active only when the current route belongs to their declared children tree.
+        // Leaf items are active only on exact path match.
+        isSelected: $ || z,
+        isChildren: f
       };
     });
-    function D() {
-      f.value && (n.routeItem.meta.click ? n.routeItem?.meta?.click() : f.value && (u.value = !u.value));
+    function L() {
+      y.value && (t.routeItem.meta.click ? t.routeItem?.meta?.click() : y.value && (a.value = !a.value));
     }
-    return q(
-      () => n.parrentRoutes,
+    return K(
+      () => t.parrentRoutes,
       () => {
-        n.parrentRoutes && n.parrentRoutes?.includes(n.routeItem?.path) && (u.value = !0);
+        t.parrentRoutes && t.parrentRoutes?.includes(t.routeItem?.path) && (a.value = !0);
       }
-    ), (e, r) => {
-      const k = U("UiLayoutMenuItem", !0);
-      return t(), m(I, null, [
-        (t(), s(C(f.value ? "button" : "RouterLink"), {
-          onClick: L(D, ["stop"]),
+    ), (e, i) => {
+      const f = b("UiLayoutMenuItem", !0);
+      return o(), m(I, null, [
+        (o(), s(k(y.value ? "button" : "RouterLink"), {
+          onClick: P(L, ["stop"]),
           to: e.routeItem?.path,
           class: "ui-layout-menu-item__link"
         }, {
-          default: V(() => [
-            B("span", {
-              class: w(["ui-layout-menu-item", [
-                { "is-selected": i.value.isSelected && !i.value.isChildren },
+          default: N(() => [
+            S("span", {
+              class: C(["ui-layout-menu-item", [
+                { "is-selected": r.value.isSelected && !r.value.isChildren },
                 { "is-collapsed": e.collapsed },
                 e.routeItem.meta?.class
               ]]),
-              onClick: r[1] || (r[1] = //@ts-ignore
-              (...o) => p(c) && p(c)(...o)),
-              onKeyup: r[2] || (r[2] = E(
+              onClick: i[1] || (i[1] = //@ts-ignore
+              (...n) => p(c) && p(c)(...n)),
+              onKeyup: i[2] || (i[2] = U(
                 //@ts-ignore
-                (...o) => p(c) && p(c)(...o),
+                (...n) => p(c) && p(c)(...n),
                 ["enter"]
               ))
             }, [
-              e.routeItem?.meta?.animationIcon ? (t(), s(p(F), {
+              e.routeItem?.meta?.animationIcon ? (o(), s(p(E), {
                 key: 0,
-                autoPlay: i.value.isSelected,
+                autoPlay: r.value.isSelected,
                 width: 24,
                 height: 24,
                 "icon-component": e.routeItem?.meta?.animationIcon,
                 class: "ui-layout-menu-item__animation"
-              }, null, 8, ["autoPlay", "icon-component"])) : a("", !0),
-              e.routeItem?.meta?.icon && e.routeItem?.meta?.iconActive ? (t(), m(I, { key: 1 }, [
-                v(S(R, {
+              }, null, 8, ["autoPlay", "icon-component"])) : u("", !0),
+              e.routeItem?.meta?.icon && e.routeItem?.meta?.iconActive ? (o(), m(I, { key: 1 }, [
+                v(w(R, {
                   size: "lg",
                   name: e.routeItem.meta.iconActive,
                   type: "filled"
                 }, null, 8, ["name"]), [
-                  [y, i.value.isSelected]
+                  [h, r.value.isSelected]
                 ]),
-                v(S(R, {
+                v(w(R, {
                   size: "lg",
                   name: e.routeItem.meta.icon,
                   type: "100"
                 }, null, 8, ["name"]), [
-                  [y, !i.value.isSelected]
+                  [h, !r.value.isSelected]
                 ])
-              ], 64)) : a("", !0),
-              e.routeItem.meta?.iconComponent ? (t(), m(I, { key: 2 }, [
-                v((t(), s(C(e.routeItem.meta?.iconComponentActive), null, null, 512)), [
-                  [y, i.value.isSelected]
+              ], 64)) : u("", !0),
+              e.routeItem.meta?.iconComponent ? (o(), m(I, { key: 2 }, [
+                v((o(), s(k(e.routeItem.meta?.iconComponentActive), null, null, 512)), [
+                  [h, r.value.isSelected]
                 ]),
-                v((t(), s(C(e.routeItem.meta?.iconComponent), null, null, 512)), [
-                  [y, !i.value.isSelected]
+                v((o(), s(k(e.routeItem.meta?.iconComponent), null, null, 512)), [
+                  [h, !r.value.isSelected]
                 ])
-              ], 64)) : a("", !0),
-              B("span", {
-                class: w(["ui-layout-menu-item__title", [{ children: i.value.isChildren }, { "children-active": i.value.isSelected }]])
-              }, M(e.routeItem.meta?.title), 3),
-              e.routeItem.meta.indicator ? (t(), m("span", G, M(e.routeItem.meta.indicator), 1)) : a("", !0),
-              e.routeItem.children?.length && !e.collapsed && !e.routeItem.meta.alwaysOpen ? (t(), m("button", {
+              ], 64)) : u("", !0),
+              S("span", {
+                class: C(["ui-layout-menu-item__title", [{ children: r.value.isChildren }, { "children-active": r.value.isSelected }]])
+              }, g(e.routeItem.meta?.title), 3),
+              e.routeItem.meta.indicator ? (o(), m("span", j, g(e.routeItem.meta.indicator), 1)) : u("", !0),
+              e.routeItem.children?.length && !e.collapsed && !e.routeItem.meta.alwaysOpen ? (o(), m("button", {
                 key: 4,
-                onClick: r[0] || (r[0] = L((o) => u.value = !u.value, ["stop", "prevent"])),
-                class: w(["ui-layout-menu-item__chevron", { "is-open": u.value }])
+                onClick: i[0] || (i[0] = P((n) => a.value = !a.value, ["stop", "prevent"])),
+                class: C(["ui-layout-menu-item__chevron", { "is-open": a.value }])
               }, [
-                S(R, {
+                w(R, {
                   name: "keyboard-arrow-down",
                   type: "400"
                 })
-              ], 2)) : a("", !0)
+              ], 2)) : u("", !0)
             ], 34)
           ]),
           _: 1
         }, 8, ["to"])),
-        e.routeItem?.children && e.routeItem.children?.length && !e.collapsed && (u.value || e.routeItem.meta.alwaysOpen) ? (t(), m("ul", J, [
-          (t(!0), m(I, null, K(e.routeItem.children, (o) => (t(), m("li", {
-            key: o?.path
+        e.routeItem?.children && e.routeItem.children?.length && !e.collapsed && (a.value || e.routeItem.meta.alwaysOpen) ? (o(), m("ul", H, [
+          (o(!0), m(I, null, V(e.routeItem.children, (n) => (o(), m("li", {
+            key: n?.path
           }, [
-            (t(), s(k, {
+            (o(), s(f, {
               routeItems: e.routeItems,
-              key: o?.path,
-              "route-item": o,
+              key: n?.path,
+              "route-item": n,
               collapsed: e.collapsed,
               parrentRoutes: e.parrentRoutes,
-              onSelected: r[3] || (r[3] = (d) => e.$emit("selected", d))
-            }, null, 8, ["routeItems", "route-item", "collapsed", "parrentRoutes"]))
+              "active-menu-path": e.activeMenuPath,
+              onSelected: i[3] || (i[3] = (d) => e.$emit("selected", d))
+            }, null, 8, ["routeItems", "route-item", "collapsed", "parrentRoutes", "active-menu-path"]))
           ]))), 128))
-        ])) : a("", !0)
+        ])) : u("", !0)
       ], 64);
     };
   }
 });
 export {
-  Pe as _
+  ge as _
 };

package/dist/components/UiLayoutMenu/UiLayoutMenu.js

@@ -1,4 +1,4 @@
-import { _ as m } from "../../assets/UiLayoutMenu.vue_vue_type_script_setup_true_lang.Bpce0J4j.js";
+import { _ as m } from "../../assets/UiLayoutMenu.vue_vue_type_script_setup_true_lang.s_cerqGK.js";
 import "../../assets/style.C3xG1ALc.js";
 export {
   m as default

package/dist/components/UiLayoutMenu/UiLayoutMenuItem.js

@@ -1,4 +1,4 @@
-import { _ as m } from "../../assets/UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.DFKZwWfN.js";
+import { _ as m } from "../../assets/UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.CDnwiaSr.js";
 import "../../assets/style.C3xG1ALc.js";
 export {
   m as default

package/dist/components/UiLayoutMenu/types.d.ts

@@ -26,4 +26,5 @@ export interface UiLayoutMenuItemProps {
     collapsed: boolean;
     parrentRoutes: string[] | null;
     routeItems: RouteItem[];
+    activeMenuPath: string | null;
 }

package/dist/index.js

@@ -33,8 +33,8 @@ import { _ as xo } from "./assets/UiLanguages.vue_vue_type_script_setup_true_lan
 import { _ as _o } from "./assets/UiLayout.vue_vue_type_script_setup_true_lang.CELUDfDH.js";
 /* empty css                                                         */
 import { default as lo } from "./components/UiLayoutAuth/UiLayoutAuth.js";
-import { _ as co } from "./assets/UiLayoutMenu.vue_vue_type_script_setup_true_lang.Bpce0J4j.js";
-import { _ as yo } from "./assets/UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.DFKZwWfN.js";
+import { _ as co } from "./assets/UiLayoutMenu.vue_vue_type_script_setup_true_lang.s_cerqGK.js";
+import { _ as yo } from "./assets/UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.CDnwiaSr.js";
 import { _ as To } from "./assets/UiLink.vue_vue_type_script_setup_true_lang.BdNoHssP.js";
 /* empty css                                                       */
 import { _ as Lo } from "./assets/UiLoading.vue_vue_type_script_setup_true_lang.CGIpSwtF.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dv.net/ui-kit",
   "private": false,
-  "version": "7.5.9",
+  "version": "7.5.10",
   "type": "module",
   "sideEffects": false,
   "module": "dist/index.js",

package/dist/assets/UiLayoutMenu.vue_vue_type_script_setup_true_lang.Bpce0J4j.js

@@ -1,59 +0,0 @@
-import { defineComponent as k, computed as a, createElementBlock as s, openBlock as u, normalizeClass as F, Fragment as p, renderList as m, createVNode as d } from "vue";
-import { _ as c } from "./UiLayoutMenuItem.vue_vue_type_script_setup_true_lang.DFKZwWfN.js";
-import "./style.C3xG1ALc.js";
-import { useRoute as I } from "vue-router";
-const L = /* @__PURE__ */ k({
-  __name: "UiLayoutMenu",
-  props: {
-    routeItems: {},
-    collapsed: { type: Boolean, default: !1 }
-  },
-  emits: ["selected"],
-  setup(f) {
-    const n = f, h = I(), y = a(() => {
-      const e = (r) => {
-        let o = [];
-        return r.forEach((t) => {
-          o.push(t), t.children?.length && (o = o.concat(e(t.children)));
-        }), o;
-      };
-      return e(n.routeItems);
-    }), i = a(() => {
-      function e(r, o, t = []) {
-        for (const l of o)
-          if (l.children && l.children.length > 0 && (l.children.some((R) => R?.path === r) || e(r, l.children, t)))
-            return t.push(l?.path), t;
-        return null;
-      }
-      return e(h?.path, n.routeItems);
-    });
-    return (e, r) => (u(), s("ul", {
-      class: F(["ui-layout-menu", { "is-collapsed": e.collapsed }])
-    }, [
-      e.collapsed ? (u(!0), s(p, { key: 0 }, m(y.value, (o) => (u(), s("li", {
-        key: o?.path
-      }, [
-        d(c, {
-          "route-item": o,
-          collapsed: e.collapsed,
-          "route-items": e.routeItems,
-          parrentRoutes: i.value,
-          onSelected: r[0] || (r[0] = (t) => e.$emit("selected", t))
-        }, null, 8, ["route-item", "collapsed", "route-items", "parrentRoutes"])
-      ]))), 128)) : (u(!0), s(p, { key: 1 }, m(e.routeItems, (o) => (u(), s("li", {
-        key: o?.path
-      }, [
-        d(c, {
-          "route-item": o,
-          collapsed: e.collapsed,
-          "route-items": e.routeItems,
-          parrentRoutes: i.value,
-          onSelected: r[1] || (r[1] = (t) => e.$emit("selected", t))
-        }, null, 8, ["route-item", "collapsed", "route-items", "parrentRoutes"])
-      ]))), 128))
-    ], 2));
-  }
-});
-export {
-  L as _
-};