design-system-next 2.7.36 → 2.7.37

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/dropdown/dropdown.ts

@@ -31,14 +31,24 @@ export const dropdownPropTypes = {
     required: true,
   },
   modelValue: {
-    type: Array as PropType<string[]>,
+    type: [String, Number, Object, Array] as PropType<string | number | Record<string, unknown> | (string | number | Record<string, unknown>)[]>,
     default: () => [],
   },
   menuList: {
-    type: Array as PropType<MenuListType[]>,
+    type: Array as PropType<MenuListType[] | string[] | Record<string, unknown>[]>,
     required: true,
     default: [],
   },
+  textField: {
+    type: String,
+    default: 'text',
+    description: 'Field name to use for display text when using dynamic object arrays',
+  },
+  valueField: {
+    type: String,
+    default: 'value',
+    description: 'Field name to use for value when using dynamic object arrays',
+  },
   searchString: {
     type: String,
     default: '',
@@ -91,7 +101,8 @@ export const dropdownPropTypes = {
 
 export const dropdownEmitTypes = {
   'infinite-scroll-trigger': Boolean,
-  'update:modelValue': (value: string[]) => value,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  'update:modelValue': (_value: unknown) => true, // Accept any type of value
 };
 
 export type DropdownPropTypes = ExtractPropTypes<typeof dropdownPropTypes>;

package/src/components/dropdown/fix-multi-number.ts

@@ -0,0 +1,92 @@
+// This file contains the fixed version of the handleSelectedItem function
+// for handling multiple primitive number values in dropdowns
+
+/**
+ * Fixed version of the handleSelectedItem function that properly handles number values in multi-select mode
+ * This is designed to be copied into the use-dropdown.ts file
+ */
+
+// Handle selected item for simple list component
+// This function is exported to be used as a reference for implementation
+export const handleSelectedItem = (selectedItems: MenuListType[]) => {
+  if (!props.ladderized) {
+    // Determine the type of value to emit based on the original data type and multiSelect
+    if (multiSelect.value) {
+      // For multi-select, always return an array
+      const values = selectedItems.map(item => {
+        // If we stored the original object, use it
+        if ('_originalObject' in item) {
+          return item._originalObject;
+        }
+        
+        // For simple types, handle value type conversion properly
+        const val = item.value;
+        
+        // If it's already a number, keep it as a number
+        if (typeof val === 'number') {
+          return val;
+        }
+        
+        // For strings that look like numbers, convert them
+        if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+          // Only convert if it looks like a proper number format
+          if (/^-?\d+(\.\d+)?$/.test(val)) {
+            return Number(val);
+          }
+        }
+        
+        // Return the original value for all other cases
+        return val;
+      });
+      
+      // Set the dropdown value
+      dropdownValue.value = values as (string | number | Record<string, unknown>)[];
+    } else {
+      // For single-select
+      if (selectedItems.length === 0) {
+        dropdownValue.value = props.multiSelect ? [] : '';
+        return;
+      }
+
+      const item = selectedItems[0];
+      
+      // If we stored the original object, use it
+      if ('_originalObject' in item) {
+        dropdownValue.value = item._originalObject as Record<string, unknown>;
+        return;
+      }
+      
+      // For simple types, return the value (try to convert number strings to numbers)
+      const val = item.value;
+      if (typeof val === 'string' && !isNaN(Number(val)) && val.trim() !== '') {
+        dropdownValue.value = Number(val);
+      } else {
+        dropdownValue.value = val;
+      }
+    }
+  } else if (props.ladderized) {
+    if (props.searchString !== '') {
+      // generate dropdown value if ladderized with search string
+      const subvalue = selectedItems[0]?.subvalue;
+      const value = selectedItems[0]?.value;
+      if (subvalue !== undefined && value !== undefined) {
+        dropdownValue.value = [subvalue, value] as [string, string | number];
+      }
+    } else {
+      // For regular ladderized dropdown selection without search
+      if (selectedItems.length > 0) {
+        const item = selectedItems[0];
+        // Use the value directly for ladderized items
+        if (item && item.value) {
+          dropdownValue.value = item.value;
+        }
+      }
+    }
+  }
+
+  if (!multiSelect.value) {
+    setTimeout(() => {
+      dropdownPopperState.value = false;
+    }, 10);
+  }
+};