design-system-next 2.12.3 → 2.12.7

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

@@ -1,7 +1,15 @@
 import { ref, onMounted } from 'vue';
 
 import type { SetupContext } from 'vue';
-import type { SidenavPropTypes, SidenavEmitTypes, ParentLinkItem, NavLinks, NavItem, MenuLinkItem, Attributes } from './sidenav';
+import type {
+  SidenavPropTypes,
+  SidenavEmitTypes,
+  ParentLinkItem,
+  NavLinks,
+  NavItem,
+  MenuLinkItem,
+  Attributes,
+} from './sidenav';
 
 interface ObjectItem {
   redirect?: {
@@ -23,16 +31,6 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
   const isQuckActionMenuVisible = ref(false);
   const isUserMenuVisible = ref(false);
 
-  const userProfileError = ref(false);
-
-  const getUserInitials = (name: string) => {
-    const nameArray = name.split(' ');
-
-    const initials = nameArray[0].charAt(0) + (nameArray[1] ? nameArray[1].charAt(0) : '');
-
-    return initials.toUpperCase();
-  };
-
   const handleRedirect = (objectItem: ObjectItem, parentNav: string, menu: string, submenu: string) => {
     if (objectItem && objectItem.redirect) {
       if (objectItem.redirect.openInNewTab) {
@@ -92,7 +90,7 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     }
   };
 
-  const groupByGroupId = (items: NavItem[]) => {
+  const groupByGroupId = (items: NavItem[]): { parentLinks: ParentLinkItem[] }[] => {
     const groups: Record<string, NavItem[]> = {};
 
     items.forEach((item) => {
@@ -102,7 +100,9 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
       groups[item.groupId].push(item);
     });
 
-    return Object.values(groups).map((group) => ({ parentLinks: group.map(mapItemToNav) }));
+    return Object.values(groups).map((group) => ({
+      parentLinks: group.map((item) => mapItemToNav(item) as ParentLinkItem),
+    }));
   };
 
   const mapItemToNav = (item: NavItem): ParentLinkItem | MenuLinkItem => {
@@ -133,12 +133,12 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
 
     return {
       title: item.label,
-      icon: item.icon || undefined,
+      icon: item.icon ?? '',
       redirect: item.url
         ? {
             openInNewTab: item.isNewTab || false,
             isAbsoluteURL: !confirmIfOwnDomain(item.url as string),
-            link: navLinkCondition(item),
+            link: navLinkCondition(item) ?? '',
           }
         : undefined,
       menuLinks: mapGroupedChildren(groupedChildren, 'menuHeading') as {
@@ -182,13 +182,23 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     return transformedData;
   };
 
-  const getLozengeTone = (attr: Attributes)  => {
-    if (typeof attr === 'object' && attr !== null && 'tone' in attr && typeof attr.tone === 'string' && ['danger', 'information', 'plain', 'pending', 'success', 'neutral', 'caution'].includes(attr.tone)) {
+  const getLozengeTone = (attr: Attributes) => {
+    if (
+      typeof attr === 'object' &&
+      attr !== null &&
+      'tone' in attr &&
+      typeof attr.tone === 'string' &&
+      ['danger', 'information', 'plain', 'pending', 'success', 'neutral', 'caution'].includes(attr.tone)
+    ) {
       return attr.tone as 'danger' | 'information' | 'plain' | 'pending' | 'success' | 'neutral' | 'caution';
     }
     return 'success'; // Default tone
   };
 
+  const getLozengeLabel = (attr: Attributes) => {
+    return attr.value && typeof attr?.value === 'object' && 'label' in attr.value ? String(attr.value.label) : '';
+  };
+
   onMounted(async () => {
     if (props.isNavApi) {
       navLinks.value = await transformedNavItems(props.navLinks);
@@ -202,11 +212,10 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     navLinks,
     isQuckActionMenuVisible,
     isUserMenuVisible,
-    userProfileError,
-    getUserInitials,
     handleRedirect,
     generateId,
     transformedNavItems,
-    getLozengeTone
+    getLozengeTone,
+    getLozengeLabel,
   };
 };

package/src/components/table/table.vue

@@ -21,7 +21,7 @@
       <table aria-describedby="describe" class="spr-h-full spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
           <tr v-if="!(props.removeHeaderOnEmpty && sortedData.length <= 0)">
-            <th v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses]">
+            <th v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses(null)]">
               <div class="spr-flex spr-items-center spr-justify-center">
                 <spr-checkbox
                   label=""

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

@@ -96,8 +96,8 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       'spr-background-color': props.variant === 'white',
       'spr-background-color-surface': props.variant === 'surface',
     });
-    const headerClasses = (header: Header) => {
-      if (header.customTailwindClasses){
+    const headerClasses = (header: Header | null) => {
+      if (header?.customTailwindClasses){
         return classNames(header.customTailwindClasses);
       }
 

package/src/components/date-picker/__tests__/date-picker.test.ts

@@ -1,112 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { describe, it, expect } from 'vitest';
-import DatePicker from '../date-picker.vue';
-
-describe('DatePicker', () => {
-  it('should render the component', () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-      },
-    });
-    
-    expect(wrapper.exists()).toBe(true);
-  });
-
-  it('should use default date format (MM-DD-YYYY) when no format prop is provided', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-      },
-    });
-
-    // Simulate user selecting a date
-    const dateToSelect = '2023-05-15'; // ISO format
-    
-    // Find the input element and simulate user input
-    const input = wrapper.find('input');
-    await input.setValue(dateToSelect);
-    await input.trigger('change');
-    
-    // Check that the emitted value uses the default format MM-DD-YYYY
-    const emittedValue = wrapper.emitted('update:modelValue');
-    expect(emittedValue).toBeDefined();
-    expect(emittedValue![emittedValue!.length - 1][0]).toMatch(/\d{2}-\d{2}-\d{4}/); // MM-DD-YYYY format
-  });
-
-  it('should format the date according to the specified format prop (YYYY-MM-DD)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-        format: 'YYYY-MM-DD',
-      },
-    });
-
-    // Simulate user selecting a date 
-    const dateToSelect = '05/15/2023'; // Different format input
-    
-    // Find the input element and simulate user input
-    const input = wrapper.find('input');
-    await input.setValue(dateToSelect);
-    await input.trigger('change');
-    
-    // Check that the emitted value uses the specified format YYYY-MM-DD
-    const emittedValue = wrapper.emitted('update:modelValue');
-    expect(emittedValue).toBeDefined();
-    expect(emittedValue![emittedValue!.length - 1][0]).toMatch(/\d{4}-\d{2}-\d{2}/); // YYYY-MM-DD format
-  });
-
-  it('should format the date according to the specified format prop (MM/DD/YYYY)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '',
-        format: 'MM/DD/YYYY',
-      },
-    });
-
-    // Simulate user selecting a date
-    const dateToSelect = '2023-05-15'; // ISO format
-    
-    // Find the input element and simulate user input
-    const input = wrapper.find('input');
-    await input.setValue(dateToSelect);
-    await input.trigger('change');
-    
-    // Check that the emitted value uses the specified format MM/DD/YYYY
-    const emittedValue = wrapper.emitted('update:modelValue');
-    expect(emittedValue).toBeDefined();
-    expect(emittedValue![emittedValue!.length - 1][0]).toMatch(/\d{2}\/\d{2}\/\d{4}/); // MM/DD/YYYY format
-  });
-
-  it('should parse dates correctly with different format (MM/DD/YYYY)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '05/15/2023', // Using MM/DD/YYYY format
-        format: 'MM/DD/YYYY',
-      },
-    });
-    
-    // Check that the component correctly displays the date in the input
-    const input = wrapper.find('input');
-    expect(input.element.value).toBe('05/15/2023');
-  });
-
-  it('should parse dates correctly with different format (YYYY-MM-DD)', async () => {
-    const wrapper = mount(DatePicker, {
-      props: {
-        id: 'test-date-picker',
-        modelValue: '2023-05-15', // Using YYYY-MM-DD format
-        format: 'YYYY-MM-DD',
-      },
-    });
-    
-    // Check that the component correctly displays the date in the input
-    const input = wrapper.find('input');
-    expect(input.element.value).toBe('2023-05-15');
-  });
-});

package/src/components/dropdown/__tests__/dropdown-fixes.spec.ts

@@ -1,106 +0,0 @@
-// Test script for dropdown component
-
-import { describe, it, expect } from 'vitest';
-import { ref } from 'vue';
-import { useDropdown } from '../use-dropdown';
-
-describe('Dropdown Component Fixes', () => {
-  describe('Value handling', () => {
-    it('should handle string value selection correctly', () => {
-      // Setup single-select dropdown with string value
-      const modelValue = ref('');
-      const menuList = [
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      // Simulate selecting an item
-      handleSelectedItem([{ text: 'Apple', value: 'apple' }]);
-      
-      // Verify correct value is set
-      expect(modelValue.value).toBe('apple');
-    });
-    
-    it('should handle multiple selection correctly', () => {
-      // Setup multi-select dropdown
-      const modelValue = ref([]);
-      const menuList = [
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      // Simulate selecting multiple items
-      handleSelectedItem([
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ]);
-      
-      // Verify correct values are set
-      expect(modelValue.value).toEqual(['apple', 'banana']);
-    });
-  });
-  
-  describe('Ladderized dropdown', () => {
-    it('should handle ladderized dropdown selection', () => {
-      // Setup ladderized dropdown
-      const modelValue = ref([]);
-      const menuList = [
-        {
-          text: 'Lion',
-          value: 'lion',
-          sublevel: [
-            { text: 'Cub', value: 'cub' }
-          ]
-        }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        ladderized: true
-      });
-      
-      // Simulate selecting an item
-      handleSelectedItem([{ text: 'Cub', value: 'cub', subvalue: 'lion' }]);
-      
-      // Verify correct values are set for ladderized dropdown
-      expect(modelValue.value).toEqual(['lion', 'cub']);
-    });
-  });
-  
-  describe('Edge cases', () => {
-    it('should handle empty selection', () => {
-      const modelValue = ref('apple');
-      const menuList = [
-        { text: 'Apple', value: 'apple' },
-        { text: 'Banana', value: 'banana' }
-      ];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      // Simulate clearing selection
-      handleSelectedItem([]);
-      
-      // Verify value is cleared
-      expect(modelValue.value).toBeUndefined();
-    });
-  });
-});

package/src/components/dropdown/__tests__/dropdown-value-types.spec.ts

@@ -1,213 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { ref } from 'vue';
-import { useDropdown } from '../use-dropdown';
-
-describe('Dropdown Value Types', () => {
-  describe('Single primitive values', () => {
-    it('should handle string values', () => {
-      const modelValue = 'apple';
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      expect(normalizedValue.value).toEqual(['apple']);
-      expect(dropdownMenuList.value).toEqual([
-        { text: 'apple', value: 'apple' },
-        { text: 'banana', value: 'banana' },
-        { text: 'cherry', value: 'cherry' }
-      ]);
-    });
-    
-    it('should handle number values', () => {
-      const modelValue = 42;
-      const menuList = [42, 55, 67];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList
-      });
-      
-      expect(normalizedValue.value).toEqual([42]);
-      expect(dropdownMenuList.value).toEqual([
-        { text: '42', value: '42' },
-        { text: '55', value: '55' },
-        { text: '67', value: '67' }
-      ]);
-    });
-  });
-  
-  describe('Single object values', () => {
-    it('should handle object values', () => {
-      const employee = { systemId: 1, firstName: 'John', lastName: 'Doe' };
-      const modelValue = employee;
-      const menuList = [
-        { systemId: 1, firstName: 'John', lastName: 'Doe' },
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
-      ];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        textField: 'firstName',
-        valueField: 'systemId'
-      });
-      
-      expect(normalizedValue.value).toEqual([employee]);
-      expect(dropdownMenuList.value[0].text).toBe('John');
-      expect(dropdownMenuList.value[1].text).toBe('Jane');
-      expect(dropdownMenuList.value[0].value).toBe('1');
-      expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
-    });
-  });
-  
-  describe('Multiple primitive values', () => {
-    it('should handle string arrays', () => {
-      const modelValue = ['apple', 'banana'];
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      expect(normalizedValue.value).toEqual(['apple', 'banana']);
-      expect(dropdownMenuList.value).toEqual([
-        { text: 'apple', value: 'apple' },
-        { text: 'banana', value: 'banana' },
-        { text: 'cherry', value: 'cherry' }
-      ]);
-    });
-    
-    it('should handle number arrays', () => {
-      const modelValue = [42, 55];
-      const menuList = [42, 55, 67];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      expect(normalizedValue.value).toEqual([42, 55]);
-      expect(dropdownMenuList.value).toEqual([
-        { text: '42', value: '42' },
-        { text: '55', value: '55' },
-        { text: '67', value: '67' }
-      ]);
-    });
-  });
-  
-  describe('Multiple object values', () => {
-    it('should handle object arrays', () => {
-      const employees = [
-        { systemId: 1, firstName: 'John', lastName: 'Doe' },
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
-      ];
-      const modelValue = employees;
-      const menuList = [
-        { systemId: 1, firstName: 'John', lastName: 'Doe' },
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' },
-        { systemId: 3, firstName: 'Mike', lastName: 'Johnson' }
-      ];
-      
-      const { dropdownMenuList, normalizedValue } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        textField: 'firstName',
-        valueField: 'systemId',
-        multiSelect: true
-      });
-      
-      expect(normalizedValue.value).toEqual(employees);
-      expect(dropdownMenuList.value[0].text).toBe('John');
-      expect(dropdownMenuList.value[1].text).toBe('Jane');
-      expect(dropdownMenuList.value[0].value).toBe('1');
-      expect(dropdownMenuList.value[0]._originalObject).toEqual(menuList[0]);
-    });
-  });
-  
-  describe('Handle selected items', () => {
-    it('should output string for string selection', () => {
-      const modelValue = ref(undefined);
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-      });
-      
-      handleSelectedItem([{ text: 'apple', value: 'apple' }]);
-      expect(modelValue.value).toBe('apple');
-    });
-    
-    it('should output number for number selection', () => {
-      const modelValue = ref(undefined);
-      const menuList = [42, 55, 67];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-      });
-      
-      handleSelectedItem([{ text: '42', value: '42' }]);
-      expect(modelValue.value).toBe(42);
-    });
-    
-    it('should output original object for object selection', () => {
-      const modelValue = ref(undefined);
-      const employeeObj = { systemId: 1, firstName: 'John', lastName: 'Doe' };
-      const menuList = [
-        employeeObj,
-        { systemId: 2, firstName: 'Jane', lastName: 'Smith' }
-      ];
-      
-      const { handleSelectedItem, dropdownMenuList } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        textField: 'firstName',
-        valueField: 'systemId'
-      });
-      
-      // Process menu list first to get _originalObject
-      dropdownMenuList.value.forEach(item => {
-        if (item.value === '1') {
-          handleSelectedItem([item]);
-        }
-      });
-      
-      expect(modelValue.value).toEqual(employeeObj);
-    });
-    
-    it('should output array for multi-select', () => {
-      const modelValue = ref([]);
-      const menuList = ['apple', 'banana', 'cherry'];
-      
-      const { handleSelectedItem } = useDropdown({
-        id: 'test',
-        modelValue,
-        menuList,
-        multiSelect: true
-      });
-      
-      handleSelectedItem([
-        { text: 'apple', value: 'apple' },
-        { text: 'banana', value: 'banana' }
-      ]);
-      
-      expect(modelValue.value).toEqual(['apple', 'banana']);
-    });
-  });
-});

package/src/examples/dropdown-number-multi-select.vue

@@ -1,76 +0,0 @@
-// Example usage of dropdown with primitive number values in multi-select mode
-
-<template>
-  <div>
-    <h2>Multiple Number Values Demo</h2>
-    <p>Selected values: {{ displaySelection }}</p>
-    
-    <div class="dropdown-container">
-      <spr-dropdown
-        id="number-multi-dropdown"
-        v-model="selectedNumbers"
-        :menu-list="numberOptions"
-        multi-select
-        @update:model-value="handleSelectedItems"
-      >
-        <spr-input
-          v-model="displayText"
-          label="Select Numbers"
-          readonly
-          placeholder="Select numbers..."
-        />
-      </spr-dropdown>
-    </div>
-    
-    <div class="mt-4">
-      <h3>Current selection type:</h3>
-      <pre>{{ typeof selectedNumbers[0] }}</pre>
-      
-      <h3>Current selection:</h3>
-      {{ selectedNumbers }}
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed } from 'vue';
-import SprInput from "@/components/input/input.vue";
-import SprDropdown from "@/components/dropdown/dropdown.vue";
-
-// Define number options - raw number values 
-const numberOptions = [
-  { text: 'One', value: 1 },
-  { text: 'Two', value: 2 },
-  { text: 'Three', value: 3 },
-  { text: 'Four', value: 4 },
-  { text: 'Five', value: 5 }
-];
-
-// Track selected numbers
-const selectedNumbers = ref([]);
-const displayText = ref('');
-
-// Display the selection summary
-const displaySelection = computed(() => {
-  if (selectedNumbers.value.length === 0) {
-    return 'None';
-  }
-  return selectedNumbers.value.join(', ');
-});
-
-// Handle selected items and update display text
-const handleSelectedItems = (items) => {
-  // For multi-select, update display text to show selected items
-  const selectedTexts = items.map(itemValue => {
-    // Find corresponding text for each selected value
-    const option = numberOptions.find(opt => opt.value === itemValue);
-    return option ? option.text : itemValue;
-  });
-  
-  // Update the input display text
-  displayText.value = selectedTexts.join(', ');
-  
-  console.log('Selected values:', items);
-  console.log('Type of first value:', typeof items[0]);
-};
-</script>