design-system-next 2.7.36 → 2.7.40

package/src/components/date-picker/use-date-picker.ts

@@ -29,7 +29,7 @@ interface MonthsList {
 }
 
 export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<DatePickerEmitTypes>['emit']) => {
-  const { active, disabled, readonly, error, currentYear, minMaxYear, restDays, disabledDates } = toRefs(props);
+  const { active, disabled, readonly, error, currentYear, minMaxYear, restDays, disabledDates, format } = toRefs(props);
 
   const modelValue = useVModel(props, 'modelValue', emit);
 
@@ -450,7 +450,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
   };
 
   const calendarTabHandleDateInput = (day: { date: Date }) => {
-    const selectedDate = dayjs(day.date, 'MM-DD-YYYY');
+    const selectedDate = dayjs(day.date);
 
     const formattedMonth = selectedDate.format('MM');
     const formattedDate = selectedDate.format('DD');
@@ -460,6 +460,9 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
     dateInput.value = formattedDate;
     yearInput.value = formattedYear;
 
+    // Update the model value with the formatted date using the specified format
+    modelValue.value = selectedDate.format(format.value);
+
     calendarTabPageData.value.selectedMonth = day.date.getMonth();
     calendarTabPageData.value.selectedYear = day.date.getFullYear();
 
@@ -610,28 +613,52 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
 
   const setModelValue = () => {
     if (modelValue.value) {
-      const formattedDate = dayjs(modelValue.value, 'MM-DD-YYYY');
+      // First try to parse with the specified format, then try default format as fallback
+      let formattedDate = dayjs(modelValue.value, format.value);
+      
+      // If the date is not valid with the specified format, try with the default format
+      if (!formattedDate.isValid()) {
+        formattedDate = dayjs(modelValue.value, 'MM-DD-YYYY');
+      }
 
-      const month = formattedDate.format('MM');
-      const date = formattedDate.format('DD');
-      const year = formattedDate.format('YYYY');
+      // If still not valid, try other common formats
+      if (!formattedDate.isValid()) {
+        const commonFormats = ['YYYY-MM-DD', 'MM/DD/YYYY', 'DD/MM/YYYY', 'YYYY/MM/DD'];
+        for (const fmt of commonFormats) {
+          const tempDate = dayjs(modelValue.value, fmt);
+          if (tempDate.isValid()) {
+            formattedDate = tempDate;
+            break;
+          }
+        }
+      }
 
-      handleValidateDate();
+      if (formattedDate.isValid()) {
+        const month = formattedDate.format('MM');
+        const date = formattedDate.format('DD');
+        const year = formattedDate.format('YYYY');
 
-      monthInput.value = month;
-      dateInput.value = date;
-      yearInput.value = year;
+        handleValidateDate();
 
-      modelValue.value = `${month}-${date}-${year}`;
+        monthInput.value = month;
+        dateInput.value = date;
+        yearInput.value = year;
 
-      calendarTabPageData.value.selectedMonth = formattedDate.get('month');
-      calendarTabPageData.value.selectedYear = formattedDate.get('year');
+        // Apply the specified format for the model value
+        modelValue.value = formattedDate.format(format.value);
 
-      handleConvertMonthIfValid();
-      calendarTabUpdateCalendar();
-      emitDateFormats();
+        calendarTabPageData.value.selectedMonth = formattedDate.get('month');
+        calendarTabPageData.value.selectedYear = formattedDate.get('year');
 
-      emit('getInputValue', `${month}-${date}-${year}`);
+        handleConvertMonthIfValid();
+        calendarTabUpdateCalendar();
+        emitDateFormats();
+
+        // Use the specified format for the input value
+        emit('getInputValue', formattedDate.format(format.value));
+      } else {
+        console.error(`Error: Could not parse date "${modelValue.value}" with format "${format.value}"`);
+      }
     }
   };
 
@@ -742,7 +769,7 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
           if (!isYearValid) {
             errorMessage = `Year must be between ${minMaxYear.value.min} and ${minMaxYear.value.max}.`;
           } else {
-            errorMessage = 'Invalid Date Format. Please use MM/DD/YYYY';
+            errorMessage = `Invalid Date Format. Please use ${format.value}`;
           }
 
           datePickerErrors.value.push({
@@ -850,7 +877,16 @@ export const useDatePicker = (props: DatePickerPropTypes, emit: SetupContext<Dat
       }
     }
 
-    emit('getInputValue', `${emittedMonth}-${dateInput.value}-${yearInput.value}`);
+    // Format the date according to the format prop
+    const dateObj = dayjs(`${emittedMonth}-${dateInput.value}-${yearInput.value}`, 'MM-DD-YYYY');
+    
+    // Use the specified format for the input value
+    emit('getInputValue', dateObj.format(format.value));
+    
+    // Update the model value with the formatted date
+    if (dateObj.isValid()) {
+      modelValue.value = dateObj.format(format.value);
+    }
   };
 
   const emitMonthList = () => {

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

@@ -0,0 +1,106 @@
+// 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

@@ -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);
+  }
+};