design-system-next 2.9.6 → 2.9.9

package/src/components/select/select-multiple/select-multiple.vue

@@ -25,38 +25,81 @@
     >
       <div ref="multiSelectRef">
         <div @click="handleOptionsToggle">
-          <spr-input
-            :id="`input-${props.id}`"
-            v-model="inputText"
-            :class="{
-              'spr-cursor-pointer': true,
-            }"
-            :placeholder="props.placeholder"
-            autocomplete="off"
-            :helper-text="props.helperText"
-            :helper-icon="props.helperIcon"
-            :display-helper="props.displayHelper"
-            :active="props.active"
-            :readonly="true"
-            :disabled="props.disabled"
-            :error="props.error"
-          >
-            <template #icon>
-              <div class="spr-flex spr-items-center spr-gap-1">
-                <Icon
-                  v-if="props.clearable && inputText"
-                  class="spr-cursor-pointer"
-                  icon="ph:x"
-                  @click.stop="handleClear"
-                />
-                <Icon icon="ph:caret-down" />
+          <template v-if="props.chipped">
+            <div :class="multiSelectClasses.chippedInputTextBaseClasses">
+              <div ref="chippedInputTextRef" :class="multiSelectClasses.chippedInputTextClasses">
+                <div class="spr-h-auto spr-w-full">
+                  <template v-if="multiSelectedListItems.length > 0">
+                    <template v-for="item in multiSelectedListItems" :key="item.value">
+                      <spr-chips
+                        class="spr-m-1 spr-inline-block"
+                        :label="String(item.text)"
+                        closable
+                        visible
+                        @close="handleChippedRemoveItem(String(item.value))"
+                      />
+                    </template>
+                  </template>
+                  <template v-else>
+                    <span class="spr-placeholder spr-px-3 spr-text-gray-400">{{ props.placeholder }}</span>
+                  </template>
+                </div>
+                <div :class="multiSelectClasses.chippedIconClasses">
+                  <div class="spr-flex spr-items-center spr-gap-1">
+                    <Icon
+                      v-if="props.clearable && inputText"
+                      class="spr-cursor-pointer"
+                      icon="ph:x"
+                      @click.stop="handleClear"
+                    />
+                    <Icon icon="ph:caret-down" />
+                  </div>
+                </div>
               </div>
-            </template>
+            </div>
+            <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperContainerClasses">
+              <div v-if="props.displayHelper" :class="multiSelectClasses.chippedHelperClasses">
+                <slot name="helperMessage">
+                  <Icon v-if="props.helperIcon" :icon="props.helperIcon" width="20px" height="20px" />
+                  <span>{{ props.helperText }}</span>
+                </slot>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <spr-input
+              :id="`input-${props.id}`"
+              v-model="inputText"
+              :class="{
+                'spr-cursor-pointer': true,
+              }"
+              :placeholder="props.placeholder"
+              autocomplete="off"
+              :helper-text="props.helperText"
+              :helper-icon="props.helperIcon"
+              :display-helper="props.displayHelper"
+              :active="props.active"
+              :readonly="true"
+              :disabled="props.disabled"
+              :error="props.error"
+            >
+              <template #icon>
+                <div class="spr-flex spr-items-center spr-gap-1">
+                  <Icon
+                    v-if="props.clearable && inputText"
+                    class="spr-cursor-pointer"
+                    icon="ph:x"
+                    @click.stop="handleClear"
+                  />
+                  <Icon icon="ph:caret-down" />
+                </div>
+              </template>
 
-            <template #helperMessage>
-              <slot name="helperMessage" />
-            </template>
-          </spr-input>
+              <template #helperMessage>
+                <slot name="helperMessage" />
+              </template>
+            </spr-input>
+          </template>
 
           <!-- Hidden Select for QA automation -->
           <select v-if="multiSelectOptions && multiSelectOptions.length" v-model="multiSelectModel" multiple hidden>
@@ -106,6 +149,7 @@ import 'floating-vue/dist/style.css';
 
 import SprInput from '../../input/input.vue';
 import SprList from '../../list/list.vue';
+import SprChips from '../../chips/chips.vue';
 
 import { multiSelectPropTypes, multiSelectEmitTypes } from './select-multiple';
 
@@ -124,6 +168,7 @@ const {
   inputText,
   isMultiSelectPopperDisabled,
   handleMultiSelectedItem,
+  handleChippedRemoveItem,
   handleClear,
   handleOptionsToggle,
 } = useMultiSelect(props, emit);

package/src/components/select/select-multiple/use-select-multiple.ts

@@ -1,5 +1,5 @@
 import { ref, toRefs, computed, ComputedRef, onMounted, watch } from 'vue';
-import { onClickOutside, useVModel } from '@vueuse/core';
+import { onClickOutside, useVModel, useFocus } from '@vueuse/core';
 
 import classNames from 'classnames';
 
@@ -10,10 +10,15 @@ import type { MenuListType } from '../../list/list';
 interface MultiSelectClasses {
   baseClasses: string;
   labelClasses: string;
+  chippedInputTextBaseClasses: string;
+  chippedInputTextClasses: string;
+  chippedIconClasses: string;
+  chippedHelperContainerClasses: string;
+  chippedHelperClasses: string;
 }
 
 export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<MultiSelectEmitTypes>['emit']) => {
-  const { displayText, options, disabled, textField, valueField } = toRefs(props);
+  const { displayText, options, textField, valueField, active, disabled, error } = toRefs(props);
 
   const multiSelectClasses: ComputedRef<MultiSelectClasses> = computed(() => {
     const baseClasses = classNames('spr-flex spr-flex-col spr-gap-size-spacing-4xs');
@@ -22,9 +27,66 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
       'spr-text-color-on-fill-disabled': disabled.value,
     });
 
+    const chippedInputTextBaseClasses = classNames(
+      'spr-relative spr-flex spr-items-center spr-min-h-9 spr-rounded-border-radius-md spr-border-[1.5px] spr-border-solid',
+      {
+        'spr-cursor-pointer': !disabled.value,
+
+        // Border State
+        'spr-border-color-weak': !focused.value && !error.value && !disabled.value && !active.value,
+        'spr-border-color-brand-base': !focused.value && active.value,
+        'spr-border-color-danger-base': !focused.value && error.value,
+
+        // Border State Focused
+        'focus: spr-border-kangkong-700': focused.value && !error.value && !disabled.value && !active.value,
+        'focus: spr-border-tomato-600': focused.value && error.value,
+        'focus: spr-border-white-100': focused.value && disabled.value,
+
+        // Disabled State
+        'spr-background-color-disabled spr-cursor-not-allowed spr-border-mushroom-100': disabled.value,
+      },
+    );
+
+    const chippedInputTextClasses = classNames(
+      'spr-flex spr-gap-1 spr-justify-between spr-w-full spr-outline-none spr-ring-0 spr-border-none spr-rounded-border-radius-md spr-font-size-200',
+      'spr-font-size-200 [font-weight:inherit]',
+      'placeholder:spr-text-mushroom-300',
+      {
+        'spr-text-color-strong': !disabled.value,
+
+        // Disabled State
+        'spr-text-color-on-fill-disabled !spr-cursor-not-allowed': disabled.value,
+      },
+    );
+
+    const chippedIconClasses = classNames(
+      'spr-flex spr-items-center spr-justify-center spr-h-inherit spr-px-2 [&>svg]:spr-min-h-4 [&>svg]:spr-min-w-4',
+      {
+        'spr-text-mushroom-300': !error.value,
+        'spr-text-tomato-600': error.value,
+      },
+    );
+
+    const chippedHelperContainerClasses = classNames(
+      'spr-flex spr-flex-row spr-items-start spr-justify-between spr-w-full',
+    );
+
+    const chippedHelperClasses = classNames(
+      'spr-body-sm-regular spr-flex spr-items-center spr-gap-size-spacing-5xs spr-flex-1',
+      {
+        'spr-text-color-danger-base': error.value,
+        'spr-text-color-supporting': !error.value,
+      },
+    );
+
     return {
       baseClasses,
       labelClasses,
+      chippedInputTextBaseClasses,
+      chippedInputTextClasses,
+      chippedIconClasses,
+      chippedHelperContainerClasses,
+      chippedHelperClasses,
     };
   });
 
@@ -39,7 +101,9 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
 
   const inputText = ref<string | number>('');
   const inputTextBackup = ref<string | number>('');
+  const chippedInputTextRef = ref(null);
 
+  const { focused } = useFocus(chippedInputTextRef);
   /**
    * Returns the normalized value of the model as an array for internal use.
    */
@@ -148,6 +212,42 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     updateMultiSelectedItemsFromValue();
   };
 
+  /**
+   * Removes an item from the multi-select model by its value.
+   * Handles stringified objects and emits the updated model value.
+   */
+  const handleChippedRemoveItem = (itemValue: string) => {
+    let currentValues = Array.isArray(multiSelectModel.value) ? [...multiSelectModel.value] : [multiSelectModel.value];
+
+    currentValues = currentValues.filter((val) => {
+      let valToCompare = val;
+
+      if (typeof valToCompare === 'string' && valToCompare.startsWith('{') && valToCompare.endsWith('}')) {
+        try {
+          valToCompare = JSON.parse(valToCompare);
+        } catch {
+          // ignore
+        }
+      }
+
+      if (typeof itemValue === 'string' && itemValue.startsWith('{') && itemValue.endsWith('}')) {
+        try {
+          itemValue = JSON.parse(itemValue);
+        } catch {
+          // ignore
+        }
+      }
+
+      if (typeof valToCompare === 'object' && typeof itemValue === 'object') {
+        return JSON.stringify(valToCompare) !== JSON.stringify(itemValue);
+      }
+
+      return valToCompare != itemValue;
+    });
+
+    emit('update:modelValue', currentValues);
+  };
+
   /**
    * Updates the selected items in the multi-select based on the current model value.
    * Handles stringified objects and updates the input text accordingly.
@@ -271,6 +371,7 @@ export const useMultiSelect = (props: MultiSelectPropTypes, emit: SetupContext<M
     inputText,
     isMultiSelectPopperDisabled,
     handleMultiSelectedItem,
+    handleChippedRemoveItem,
     handleClear,
     handleOptionsToggle,
   };

package/src/components/sidenav/sidenav.ts

@@ -5,6 +5,7 @@ type QuickAction = {
   items: QuickActionItem[];
 };
 
+
 type QuickActionItem = {
   title: string;
   description: string;
@@ -14,23 +15,29 @@ type QuickActionItem = {
   hidden: boolean;
 };
 
-type NavLinks = {
+export type NavLinks = {
   top: { parentLinks: ParentLinkItem[] }[];
   bottom: { parentLinks: ParentLinkItem[] }[];
 };
 
-type ParentLinkItem = {
+export type NavAPILinks = {
+  top: { parentLinks: NavItem[] }[];
+  bottom: { parentLinks: NavItem[] }[];
+};
+
+export type ParentLinkItem = {
   title: string;
   icon: string;
-  link: string;
-  redirect: Redirect;
+  link?: string;
+  redirect?: Redirect;
   menuLinks: MenuLink[];
-  hidden: boolean;
+  submenuLinks?: SubmenuLink[];
+  hidden?: boolean;
 };
 
 type MenuLink = {
   menuHeading: string;
-  items: MenuLinkItem[];
+  items: MenuLinkItem[] | ParentLinkItem[];
 };
 
 type MenuLinkItem = {
@@ -42,7 +49,7 @@ type MenuLinkItem = {
 
 type SubmenuLink = {
   subMenuHeading: string;
-  items: SubmenuLinkItem[];
+  items: SubmenuLinkItem[] | ParentLinkItem[];
 };
 
 type SubmenuLinkItem = {
@@ -70,6 +77,34 @@ type UserMenuItem = {
   hidden: boolean;
   redirect: Redirect;
 };
+export interface NavItem {
+  groupId: string;
+  label: string;
+  icon?: string | null;
+  url?: string | null;
+  isNewTab?: boolean;
+  children?: NavItem[] | null;
+  groupName?: string | null;
+  hidden?: boolean;
+}
+
+export interface MappedNavItem {
+  title: string;
+  icon?: string;
+  redirect?: {
+      openInNewTab: boolean;
+      isAbsoluteURL: boolean;
+      link: string;
+  };
+  menuLinks?: {
+      menuHeading: string;
+      items: MappedNavItem[];
+  }[];
+  submenuLinks?: {
+      subMenuHeading: string;
+      items: MappedNavItem[];
+  }[];
+}
 
 export const sidenavPropTypes = {
   quickActions: {
@@ -120,6 +155,11 @@ export const sidenavPropTypes = {
     validator: (value: unknown) => typeof value === 'boolean',
     default: false,
   },
+  isNavApi: {
+    type: Boolean,
+    validator: (value: unknown) => typeof value === 'boolean',
+    default: false,
+  }
 };
 
 export const sidenavEmitTypes = {

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