design-system-next 2.7.44 → 2.8.0

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

@@ -0,0 +1,213 @@
+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/components/list/ladderized-list/ladderized-list.ts

@@ -13,6 +13,18 @@ export const ladderizedListPropTypes = {
     required: true,
     default: [],
   },
+  menuLevel: {
+    type: Number,
+    default: 0,
+  },
+  searchableMenu: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenuPlaceholder: {
+    type: String,
+    default: 'Search...',
+  },
   removeCurrentLevelInBackLabel: {
     type: Boolean,
     default: false,

package/src/components/list/ladderized-list/ladderized-list.vue

@@ -7,8 +7,11 @@
           v-model="selectedListItem"
           class="spr-p-size-spacing-3xs"
           :menu-list="activeList"
+          :menu-level="props.menuLevel"
           :multi-select="false"
           :ladderized="true"
+          :searchable-menu="props.searchableMenu"
+          :searchable-menu-placeholder="props.searchableMenuPlaceholder"
           @update:model-value="(value) => handleSelectedListItem(value[0])"
         />
       </div>
@@ -19,8 +22,11 @@
           v-model="selectedListItem"
           class="spr-p-size-spacing-3xs"
           :menu-list="activeList"
+          :menu-level="props.menuLevel"
           :multi-select="false"
           :ladderized="true"
+          :searchable-menu="props.searchableMenu"
+          :searchable-menu-placeholder="props.searchableMenuPlaceholder"
           @update:model-value="(value) => handleSelectedListItem(value[0])"
         />
       </div>

package/src/components/list/list.ts

@@ -7,18 +7,18 @@ const GROUPED_ITEMS_BY_TYPES = ['A-Z', 'Z-A', 'default'] as const;
 export type MenuListType = {
   text: string;
   subtext?: string;
-  value: string | number;  // Allow both string and number values
+  value: string | number; // Allow both string and number values
   subvalue?: string;
   sublevel?: MenuListType[];
   group?: string;
   disabled?: boolean;
-  _originalObject?: Record<string, unknown>;  // Store original object reference when mapping complex objects
+  _originalObject?: Record<string, unknown>; // Store original object reference when mapping complex objects
 };
 
 export type GroupedMenuListType = {
   groupLabel: string;
   items: MenuListType[];
-}
+};
 
 export const listPropTypes = {
   modelValue: {
@@ -40,6 +40,18 @@ export const listPropTypes = {
     type: Boolean,
     default: false,
   },
+  menuLevel: {
+    type: Number,
+    default: 0,
+  },
+  searchableMenu: {
+    type: Boolean,
+    default: false,
+  },
+  searchableMenuPlaceholder: {
+    type: String,
+    default: 'Search...',
+  },
   preSelectedItems: {
     type: Array as PropType<(string | number | Record<string, unknown>)[]>,
     default: () => [],

package/src/components/list/list.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="spr-font-main">
+    <div v-if="props.searchableMenu" class="spr-mb-3 spr-grid spr-gap-3">
+      <spr-input
+        v-model="searchText"
+        :placeholder="props.searchableMenuPlaceholder"
+        autocomplete="off"
+        @keyup="handleSearch"
+      />
+
+      <div v-if="isParentMenu" class="spr-background-color-surface spr-h-[1px]"></div>
+    </div>
+
     <template v-if="props.groupItemsBy">
       <div class="spr-grid spr-gap-2">
         <div v-for="(list, listIndex) in groupedMenuList" :key="listIndex" class="spr-grid spr-gap-0.5">
@@ -46,11 +57,21 @@
         @click="handleSelectedItem(item)"
       >
         <spr-checkbox v-if="props.multiSelect" :disabled="item.disabled" :checked="isItemSelected(item)" />
-        <div :class="['spr-flex spr-flex-auto spr-flex-col spr-justify-start', { 'spr-text-color-disabled': item.disabled }]">
+        <div
+          :class="[
+            'spr-flex spr-flex-auto spr-flex-col spr-justify-start',
+            { 'spr-text-color-disabled': item.disabled },
+          ]"
+        >
           <span class="spr-text-left spr-text-xs">{{ item.text }}</span>
-          <span v-if="item.subtext" :class="['spr-body-xs-regular spr-text-color-base spr-text-left', { 'spr-text-color-disabled': item.disabled }]">{{
-            item.subtext
-          }}</span>
+          <span
+            v-if="item.subtext"
+            :class="[
+              'spr-body-xs-regular spr-text-color-base spr-text-left',
+              { 'spr-text-color-disabled': item.disabled },
+            ]"
+            >{{ item.subtext }}</span
+          >
         </div>
         <Icon
           v-if="isItemSelected(item) && !props.multiSelect"
@@ -73,13 +94,20 @@ import { Icon } from '@iconify/vue';
 import { listPropTypes, listEmitTypes } from './list';
 import { useList } from './use-list';
 
-import SprCheckbox from '../checkbox/checkbox.vue';
+import SprCheckbox from '@/components/checkbox/checkbox.vue';
+import SprInput from '@/components/input/input.vue';
 
 const props = defineProps(listPropTypes);
 const emit = defineEmits(listEmitTypes);
 
-const { localizedMenuList, groupedMenuList, isItemSelected, getListItemClasses, handleSelectedItem } = useList(
-  props,
-  emit,
-);
+const {
+  searchText,
+  localizedMenuList,
+  groupedMenuList,
+  isParentMenu,
+  isItemSelected,
+  getListItemClasses,
+  handleSearch,
+  handleSelectedItem,
+} = useList(props, emit);
 </script>

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

@@ -13,7 +13,7 @@ interface ListClasses {
 export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>['emit']) => {
   const selectedItems = useVModel(props, 'modelValue', emit);
 
-  const { menuList, groupItemsBy, multiSelect, preSelectedItems } = toRefs(props);
+  const { menuList, menuLevel, groupItemsBy, multiSelect, preSelectedItems } = toRefs(props);
 
   const listClasses: ComputedRef<ListClasses> = computed(() => {
     const listItemClasses = classNames(
@@ -26,6 +26,8 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
     return { listItemClasses };
   });
 
+  const searchText = ref<string>('');
+
   const localizedMenuList = ref<MenuListType[]>([]);
   const groupedMenuList = ref<GroupedMenuListType[]>([
     {
@@ -35,66 +37,72 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   ]);
 
   // #region - Helper Methods
+  const isParentMenu = computed(() => menuLevel.value === 0);
+
   const isItemSelected = (item: MenuListType) => {
     // First check standard selection via the selectedItems array
     const directSelected = selectedItems.value.some((selectedItem) => {
       // Compare both text and value properties to handle different value types
       if (selectedItem.text === item.text) return true;
-      
+
       // Ensure comparison works for both string and number values
       const selectedItemValue = selectedItem.value;
       const itemValue = item.value;
-      
+
       // For primitives, use string comparison to handle number-string comparison properly
       if (typeof selectedItemValue !== 'object' && typeof itemValue !== 'object') {
         return String(selectedItemValue) === String(itemValue);
       }
-      
+
       // For objects, use JSON.stringify for comparison (will match for equality)
-      if (typeof selectedItemValue === 'object' && selectedItemValue !== null &&
-          typeof itemValue === 'object' && itemValue !== null) {
+      if (
+        typeof selectedItemValue === 'object' &&
+        selectedItemValue !== null &&
+        typeof itemValue === 'object' &&
+        itemValue !== null
+      ) {
         return JSON.stringify(selectedItemValue) === JSON.stringify(itemValue);
       }
-      
+
       return false;
     });
-    
+
     if (directSelected) return true;
-    
+
     // Additional check for objects stored in _originalObject property
     if ('_originalObject' in item && item._originalObject && preSelectedItems.value?.length) {
-      return preSelectedItems.value.some(preSelectedValue => {
+      return preSelectedItems.value.some((preSelectedValue) => {
         // Direct reference comparison (most accurate)
         if (preSelectedValue === item._originalObject) {
           return true;
         }
-        
+
         // If both are objects, compare their serialized forms
         if (typeof preSelectedValue === 'object' && preSelectedValue !== null) {
           const originalObj = item._originalObject as Record<string, unknown>;
-          
+
           if (typeof originalObj === 'object') {
             // First try comparing by ID for more reliable object comparison
             if ('id' in preSelectedValue && 'id' in originalObj) {
               return preSelectedValue.id === originalObj.id;
             }
-            
+
             // Fallback to full object comparison
             const valString = JSON.stringify(preSelectedValue);
             const itemString = JSON.stringify(originalObj);
             return valString === itemString;
           }
-          
+
           // If object has an id field, check if it matches with the item value
           if ('id' in preSelectedValue) {
             return String(item.value).includes(String(preSelectedValue.id));
           }
         }
-        
+
         return false;
       });
     }
-    
+
     return false;
   };
 
@@ -159,52 +167,48 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
         // For objects, check for matching _originalObject properties
         if (typeof preSelectedItem === 'object' && preSelectedItem !== null) {
           // Try to find an item with a matching _originalObject
-          const objectMatch = localizedMenuList.value.find(menuItem => {
+          const objectMatch = localizedMenuList.value.find((menuItem) => {
             if (!menuItem._originalObject) return false;
-            
+
             // Compare serialized versions for deep equality
             return JSON.stringify(menuItem._originalObject) === JSON.stringify(preSelectedItem);
           });
-          
+
           if (objectMatch) return objectMatch;
-          
+
           // If no direct object match, try matching on ID if both have it
           if ('id' in preSelectedItem) {
-            const idMatch = localizedMenuList.value.find(menuItem => {
+            const idMatch = localizedMenuList.value.find((menuItem) => {
               if (menuItem._originalObject && 'id' in menuItem._originalObject) {
                 return menuItem._originalObject.id === preSelectedItem.id;
               }
               // Also check if the value field contains a stringified version that includes the id
               return String(menuItem.value).includes(String(preSelectedItem.id));
             });
-            
+
             if (idMatch) return idMatch;
           }
         }
-        
+
         // First try direct value comparison (for exact matches)
-        const directMatch = localizedMenuList.value.find(
-          (menuItem) => menuItem.value === preSelectedItem
-        );
+        const directMatch = localizedMenuList.value.find((menuItem) => menuItem.value === preSelectedItem);
         if (directMatch) return directMatch;
-        
+
         // Special handling for number values in the preSelectedItems array
         if (typeof preSelectedItem === 'number') {
           // Find items that match the number value either directly or as a string
           const numericMatch = localizedMenuList.value.find(
-            (menuItem) => 
+            (menuItem) =>
               // Match if menuItem.value is the same number
               (typeof menuItem.value === 'number' && menuItem.value === preSelectedItem) ||
               // Match if menuItem.value is a string representation of the number
-              (typeof menuItem.value === 'string' && menuItem.value === String(preSelectedItem))
+              (typeof menuItem.value === 'string' && menuItem.value === String(preSelectedItem)),
           );
           if (numericMatch) return numericMatch;
         }
-        
+
         // Then try string comparison for cases where types differ (string vs number)
-        return localizedMenuList.value.find(
-          (menuItem) => String(menuItem.value) === String(preSelectedItem)
-        );
+        return localizedMenuList.value.find((menuItem) => String(menuItem.value) === String(preSelectedItem));
       })
       .filter(Boolean) as MenuListType[];
 
@@ -229,50 +233,112 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   const getListItemClasses = (item: MenuListType) => ({
     [listClasses.value.listItemClasses]: !item.disabled,
     'spr-background-color-single-active': isItemSelected(item) && !item.disabled,
-    'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg spr-p-2': item.disabled,
+    'hover:spr-cursor-not-allowed spr-flex spr-cursor-pointer spr-items-center spr-gap-1.5 spr-rounded-lg spr-p-2':
+      item.disabled,
   });
 
+  const handleSearch = () => {
+    const search = searchText.value.trim().toLowerCase();
+
+    if (!search) {
+      setMenuList();
+
+      return;
+    }
+
+    // Filter items by text or subtext
+    const filtered = props.menuList.filter((item) => {
+      const textMatch = item.text.toLowerCase().includes(search);
+      const subtextMatch = item.subtext ? item.subtext.toLowerCase().includes(search) : false;
+
+      return textMatch || subtextMatch;
+    });
+
+    localizedMenuList.value = filtered;
+
+    // If grouping is enabled, regroup the filtered list
+    if (groupItemsBy?.value) {
+      groupedMenuList.value = [{ groupLabel: 'no-group', items: [] }];
+      if (groupItemsBy.value === 'default') {
+        filtered.forEach((item) => {
+          const groupKey = item.group || 'no-group';
+
+          if (groupedMenuList.value.some((g) => g.groupLabel === groupKey)) {
+            groupedMenuList.value.find((g) => g.groupLabel === groupKey)?.items.push(item);
+          } else {
+            groupedMenuList.value.push({ groupLabel: groupKey, items: [item] });
+          }
+        });
+      } else {
+        filtered
+          .sort((a, b) => {
+            if (groupItemsBy.value === 'A-Z') return a.text.localeCompare(b.text);
+            if (groupItemsBy.value === 'Z-A') return b.text.localeCompare(a.text);
+
+            return 0;
+          })
+          .forEach((item) => {
+            const firstCharacter = item.text.charAt(0);
+            const groupKey = /^\d/.test(firstCharacter) ? 'no-group' : firstCharacter.toUpperCase();
+
+            if (groupedMenuList.value.some((g) => g.groupLabel === groupKey)) {
+              groupedMenuList.value.find((g) => g.groupLabel === groupKey)?.items.push(item);
+            } else {
+              groupedMenuList.value.push({ groupLabel: groupKey, items: [item] });
+            }
+          });
+      }
+    }
+  };
+
   const handleSelectedItem = (item: MenuListType) => {
-    if(item.disabled) return;
+    if (item.disabled) return;
 
     if (multiSelect.value) {
       // For multi-select, check if item is already selected
       const index = selectedItems.value.findIndex((selectedItem: MenuListType) => {
         // Compare text values first for simple match
         if (selectedItem.text === item.text) return true;
-        
+
         // Compare primitive values with string conversion for compatibility
         if (typeof selectedItem.value !== 'object' && typeof item.value !== 'object') {
           return String(selectedItem.value) === String(item.value);
         }
-        
+
         // For objects, compare their JSON string representations
-        if (typeof selectedItem.value === 'object' && selectedItem.value !== null &&
-            typeof item.value === 'object' && item.value !== null) {
+        if (
+          typeof selectedItem.value === 'object' &&
+          selectedItem.value !== null &&
+          typeof item.value === 'object' &&
+          item.value !== null
+        ) {
           return JSON.stringify(selectedItem.value) === JSON.stringify(item.value);
         }
-        
+
         // Compare _originalObject if available (most reliable for complex objects)
-        if ('_originalObject' in selectedItem && selectedItem._originalObject && 
-            '_originalObject' in item && item._originalObject) {
-          
+        if (
+          '_originalObject' in selectedItem &&
+          selectedItem._originalObject &&
+          '_originalObject' in item &&
+          item._originalObject
+        ) {
           // Direct reference equality check (fastest)
           if (selectedItem._originalObject === item._originalObject) {
             return true;
           }
-          
+
           // ID-based comparison (reliable for objects with IDs)
           const selectedObj = selectedItem._originalObject as Record<string, unknown>;
           const itemObj = item._originalObject as Record<string, unknown>;
-          
+
           if ('id' in selectedObj && 'id' in itemObj) {
             return selectedObj.id === itemObj.id;
           }
-          
+
           // Full JSON comparison (most comprehensive but slower)
           return JSON.stringify(selectedItem._originalObject) === JSON.stringify(item._originalObject);
         }
-        
+
         return false;
       });
 
@@ -306,11 +372,14 @@ export const useList = (props: ListPropTypes, emit: SetupContext<ListEmitTypes>[
   });
 
   return {
+    searchText,
     listClasses,
     localizedMenuList,
     groupedMenuList,
+    isParentMenu,
     isItemSelected,
     getListItemClasses,
+    handleSearch,
     handleSelectedItem,
   };
 };