design-system-next 2.9.7 → 2.9.9

package/src/components/sidenav/sidenav.vue

@@ -139,7 +139,7 @@
         </div>
 
         <!-- Grouped Nav Links -->
-        <template v-for="(navLink, navLinkIndex) in props.navLinks.top" :key="navLinkIndex">
+        <template v-for="(navLink, navLinkIndex) in navLinks.top" :key="navLinkIndex">
           <template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
             <!-- Parent link with menu links -->
             <template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
@@ -352,7 +352,7 @@
             </template>
           </template>
           <div
-            v-if="props.navLinks.top.length > 0 && navLinkIndex < props.navLinks.top.length - 1"
+            v-if="navLinks.top.length > 0 && navLinkIndex < navLinks.top.length - 1"
             class="spr-background-color-hover spr-h-[2px] spr-w-full"
           ></div>
         </template>
@@ -360,11 +360,11 @@
 
       <!-- Bottom Section -->
       <div
-        v-if="props.navLinks.bottom && props.navLinks.bottom.length > 0"
+        v-if="navLinks.bottom && navLinks.bottom.length > 0"
         class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-0"
       >
         <!-- Grouped Nav Links -->
-        <template v-for="(navLink, navLinkIndex) in props.navLinks.bottom" :key="navLinkIndex">
+        <template v-for="(navLink, navLinkIndex) in navLinks.bottom" :key="navLinkIndex">
           <template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
             <!-- Parent link with menu links -->
             <template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
@@ -573,7 +573,7 @@
             </template>
           </template>
           <div
-            v-if="props.navLinks.bottom.length > 0 && navLinkIndex < props.navLinks.bottom.length - 1"
+            v-if="navLinks.bottom.length > 0 && navLinkIndex < navLinks.bottom.length - 1"
             class="spr-background-color-hover spr-h-[2px] spr-w-full"
           ></div>
         </template>
@@ -767,7 +767,7 @@ import SprBadge from '../badge/badge.vue';
 const props = defineProps(sidenavPropTypes);
 const emit = defineEmits(sidenavEmitTypes);
 
-const { isQuckActionMenuVisible, isUserMenuVisible, userProfileError, getUserInitials, handleRedirect, generateId } = useSidenav(
+const { navLinks, isQuckActionMenuVisible, isUserMenuVisible, userProfileError, getUserInitials, handleRedirect, generateId } = useSidenav(
   props,
   emit,
 );

package/src/components/sidenav/use-sidenav.ts

@@ -1,7 +1,7 @@
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import type { SetupContext } from 'vue';
 
-import type { SidenavPropTypes, SidenavEmitTypes } from './sidenav';
+import type { SidenavPropTypes, SidenavEmitTypes, ParentLinkItem, NavLinks, NavItem } from './sidenav';
 
 interface ObjectItem {
   redirect: {
@@ -17,6 +17,7 @@ interface ObjectItem {
 }
 
 export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEmitTypes>['emit']) => {
+  const navLinks = ref<NavLinks>(props.navLinks);
   const isQuckActionMenuVisible = ref(false);
 
   const isUserMenuVisible = ref(false);
@@ -67,13 +68,106 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
   const generateId = (...titles: string[]): string => {
     return titles.map(transformToCamelCaseId).join('_');
   }
+  const confirmIfOwnDomain = (url: string) => {
+    const domain = window.location.href; 
+    const urlHostname = new URL(url).hostname;
+    const isOwnDomain = domain === urlHostname || window.location.hostname === 'localhost'
+    return isOwnDomain;
+  }
+
+  const getPathFromUrl = (url: string): string => {
+    const parsedUrl = new URL(url);
+    return parsedUrl ? parsedUrl.pathname : ''; 
+    
+  }
+
+  const navLinkCondition = (link: NavItem) => {
+    if (confirmIfOwnDomain(link.url as string)) {
+        return getPathFromUrl(link.url as string);
+    } else {
+        return link.url;
+    }
+  }
+
+  const groupByGroupId = (items: NavItem[]) => {
+    const groups: Record<string, NavItem[]> = {};
+    items.forEach(item => {
+        if (!groups[item.groupId]) {
+            groups[item.groupId] = [];
+        }
+        groups[item.groupId].push(item);
+    });
+    return Object.values(groups).map(group => ({ parentLinks: group.map(mapItemToNav) }));
+  }
+
+  const mapItemToNav = (item: NavItem): ParentLinkItem => {
+    return {
+        title: item.label,
+        icon: item.icon || "",
+        redirect: item.url
+            ? {
+                openInNewTab: item.isNewTab || false,
+                isAbsoluteURL: !confirmIfOwnDomain(item.url),
+                link: navLinkCondition(item) || "",
+            }
+            : undefined,
+        menuLinks: item.children && item.children.length > 0
+            ? [{
+                menuHeading: '',
+                items: item.children.map(child => mapItemToNav(child))
+            }]
+            : [],
+        submenuLinks: item.children && item.children.length > 0 && !item.children.some(c => c.children)
+            ? [{
+                subMenuHeading: '',
+                items: item.children.map(child => mapItemToNav(child)),
+            }]
+            : [],
+    }
+  }
+
+  // Helper function to extract valid NavItems from an array of objects
+  const extractValidNavItems = <T extends Record<string, unknown>>(items: T[]): NavItem[] => {
+    return items.filter((item): item is NavItem & T => (
+      item !== null && 
+      'groupId' in item &&
+      'label' in item &&
+      typeof item.groupId === 'string' && 
+      typeof item.label === 'string'
+    )) as NavItem[];
+  };
+
+  const transformedNavItems = async (apiData: NavLinks) => {
+    // Output type matches navLinks ref type
+    const transformedData: NavLinks = { top: [], bottom: [] };
+    
+    if (apiData.top && Array.isArray(apiData.top)) {
+      const validTopItems = extractValidNavItems(apiData.top);
+      transformedData.top = groupByGroupId(validTopItems);
+    }
+    
+    if (apiData.bottom && Array.isArray(apiData.bottom)) {
+      const validBottomItems = extractValidNavItems(apiData.bottom);
+      transformedData.bottom = groupByGroupId(validBottomItems);
+    }
+
+    return transformedData;
+  }
+
+  onMounted(async () => {
+    if (props.isNavApi) {
+      navLinks.value = await transformedNavItems(props.navLinks);
+    }
+  })
 
   return {
+    navLinks,
     isQuckActionMenuVisible,
     isUserMenuVisible,
     userProfileError,
     getUserInitials,
     handleRedirect,
-    generateId
+    generateId,
+    transformedNavItems,
   };
 };

package/src/vite-env.d.ts

@@ -0,0 +1,6 @@
+interface ImportMeta { readonly glob: ImportMetaGlob }
+
+interface ImportMetaGlob {
+  (pattern: string, options?: { eager?: boolean }): Record<string, () => Promise<unknown>>
+  (pattern: string, options?: { eager: true }): Record<string, unknown>
+}