mediacube-ui 0.1.402 → 0.1.404

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.404](https://github.com/MediaCubeCo/mcui/compare/v0.1.403...v0.1.404) (2025-08-12)
+
+### [0.1.403](https://github.com/MediaCubeCo/mcui/compare/v0.1.402...v0.1.403) (2025-08-11)
+
 ### [0.1.402](https://github.com/MediaCubeCo/mcui/compare/v0.1.401...v0.1.402) (2025-07-30)
 
 ### [0.1.401](https://github.com/MediaCubeCo/mcui/compare/v0.1.400...v0.1.401) (2025-07-29)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mediacube-ui",
-  "version": "0.1.402",
+  "version": "0.1.404",
   "description": "Design system for Mediacube services",
   "author": "Mediacube",
   "private": false,

package/src/elements/McInfinityLoadingIndicator/McInfinityLoadingIndicator.vue

@@ -54,6 +54,7 @@ export default {
     methods: {
         setObserver() {
             this.el = document.getElementById(this.id)
+            if (!this.el) return
             // создаем IntersectionObserver - смотрит за тем когда элемент попадает во viewport
             this.observer = new IntersectionObserver(
                 ([entry]) => {

package/src/patterns/McSideBar/McSideBarCenter/McSideBarCenter.vue

@@ -55,6 +55,7 @@
                         :href="menuItem.href"
                         :to="menuItem.to"
                         :icon="menuItem.icon"
+                        :is-active="menuItem.active()"
                         :icon-color="menuItem.iconColor"
                         :title="menuItem.name"
                         :compact="compact"
@@ -115,11 +116,13 @@ export default {
          icon: [String] - icon,
          to: [String] - route path (used like link if this route haven't nested menu if they isn't they work like button who open nested menu),
          info: [String] - info badge text
+         route_name?: [String] - extra field if route should be active even if it has extra params applied (route_name === 'page-index-format')
          menu: [
          {
          name: [String] - menu item title,
          to: [String] - route path,
-         info: [String] - info badge text
+         info: [String] - info badge text,
+         route_name?: [String]
          },
          ...
          ]
@@ -199,16 +202,16 @@ export default {
             this.loading = true
             if (oldRoute.path !== newRoute.path) {
                 const route = this.preparedMainMenu.find(
-                    r => r.to === newRoute.path || r.menu?.find(childRoute => childRoute.to === newRoute.path),
+                    r =>
+                        this.checkRoute(r, newRoute) ||
+                        r.menu?.find(childRoute => this.checkRoute(childRoute, newRoute)),
                 )
                 route?.menu && !this.compact && (route.open = true)
             }
             this.$nextTick(() => {
                 this.preparedMainMenu.forEach(mi => {
-                    const exact_route = mi.to === newRoute.path
-                    const route_menu_match_new_route =
-                        mi.menu && mi.menu.some(mim => mim.to?.match(newRoute.path) || newRoute.path?.match(mim.to))
-                    if (!(exact_route || route_menu_match_new_route)) mi.open = false
+                    const route_menu_match_new_route = mi.menu?.some(mim => this.checkRoute(mim, newRoute))
+                    if (!(this.checkRoute(mi, newRoute) || route_menu_match_new_route)) mi.open = false
                 })
                 this.loading = false
             })
@@ -218,6 +221,12 @@ export default {
         this.setMainMenu()
     },
     methods: {
+        // If we have route_name, than we should check originalRoute.name to prevent cases with different params at same route
+        checkRoute(route, originalRoute) {
+            return !!(route?.route_name
+                ? originalRoute.name.match(route.route_name)
+                : originalRoute.path.match(route.to))
+        },
         getMenuItemHeadClasses(menuMainItem) {
             return {
                 open: menuMainItem.open,
@@ -239,16 +248,17 @@ export default {
             this.loading = true
             this.preparedMainMenu = this.menuMain.map(i => {
                 const active = () => {
-                    return (
-                        (i.menu && i.menu.some(r => this.$route?.fullPath?.match(r.to))) ||
-                        !!this.$route?.fullPath?.match(i.to)
-                    )
+                    return i?.menu?.some(r => this.checkRoute(r, this.$route)) || this.checkRoute(i, this.$route)
                 }
                 return {
                     id: _XEUtils.uniqueId(),
                     ...i,
+                    menu: i.menu?.map(item => ({
+                        ...item,
+                        active: () => this.checkRoute(item, this.$route),
+                    })),
                     active,
-                    indicator: () => i.menu && i.menu.some(r => !!this.counts?.[r.count_key]),
+                    indicator: () => i.menu?.some(r => !!this.counts?.[r.count_key]),
                     open: !this.compact && active(),
                 }
             })