design-system-next 2.12.1 → 2.12.3

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

@@ -1,157 +1,157 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const REST_DAYS_TYPES = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'] as const;
-
-const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
-const PLACEMENTS_TYPES = [
-  'auto',
-  'auto-start',
-  'auto-end',
-  'top',
-  'top-start',
-  'top-end',
-  'right',
-  'right-start',
-  'right-end',
-  'bottom',
-  'bottom-start',
-  'bottom-end',
-  'left',
-  'left-start',
-  'left-end',
-] as const;
-
-export const datePickerPropTypes = {
-  id: {
-    type: String,
-    required: true,
-    default: 'date-picker',
-  },
-  modelValue: {
-    type: String,
-    default: '',
-    required: true,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  readonly: {
-    type: Boolean,
-    default: false,
-  },
-  error: {
-    type: Boolean,
-    default: false,
-  },
-  currentYear: {
-    type: String,
-    default: new Date().getFullYear().toString(),
-  },
-  minMaxYear: {
-    type: Object as PropType<MinMaxYearType>,
-    default: () => ({
-      min: 1900,
-      max: new Date().getFullYear(),
-    }),
-  },
-  restDays: {
-    type: Array as PropType<RestDayType[]>,
-    validator: (value: RestDayType[]): boolean => {
-      return value.every((val) => REST_DAYS_TYPES.includes(val));
-    },
-    default: [],
-  },
-  disabledDates: {
-    type: Object as PropType<DisabledDatesType>,
-  },
-  displayHelper: {
-    type: Boolean,
-    default: false,
-  },
-  helperText: {
-    type: String,
-    default: '',
-  },
-  helperIcon: {
-    type: String,
-    default: null,
-  },
-  width: {
-    type: String,
-    default: '100%',
-  },
-  popperStrategy: {
-    type: String,
-    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
-    default: 'absolute',
-  },
-  placement: {
-    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
-    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
-    default: 'bottom',
-  },
-  format: {
-    type: String,
-    default: 'MM-DD-YYYY',
-    description: 'Format for the selected date. For example: MM/DD/YYYY, YYYY-MM-DD, etc.',
-  },
-};
-
-export type RestDayType = (typeof REST_DAYS_TYPES)[number];
-
-export type DisabledDatesType = {
-  to: string;
-  from: string;
-  pastDates: boolean | string;
-  futureDates: boolean | string;
-  selectedDates: Array<string>;
-  weekends: boolean;
-  weekdays: boolean;
-  selectedDays: Array<string>;
-};
-
-export type MinMaxYearType = {
-  min: number;
-  max: number;
-};
-
-export const datePickerEmitTypes = {
-  'update:modelValue': (value: string) => typeof value === 'string',
-  getInputValue: (value: string | null) => value === null || typeof value === 'string',
-  getDateFormats: (value: Record<string, string>) => {
-    return (
-      typeof value === 'object' &&
-      value !== null &&
-      !Array.isArray(value) &&
-      Object.keys(value).every((key) => typeof value[key] === 'string')
-    );
-  },
-  getMonthList: (value: Array<object>) => Array.isArray(value),
-  getYearList: (value: Array<number>) => Array.isArray(value),
-  getDateErrors: (value: Array<{ title: string; message: string }>) => {
-    return (
-      Array.isArray(value) &&
-      value.every(
-        (item) =>
-          item !== null &&
-          typeof item === 'object' &&
-          typeof item.title === 'string' &&
-          typeof item.message === 'string',
-      )
-    );
-  },
-};
-
-export type DatePickerPropTypes = ExtractPropTypes<typeof datePickerPropTypes>;
-export type DatePickerEmitTypes = typeof datePickerEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const REST_DAYS_TYPES = ['su', 'mo', 'tu', 'we', 'th', 'fr', 'sa'] as const;
+
+const POPPER_STRATEGY_TYPES = ['fixed', 'absolute'] as const;
+const PLACEMENTS_TYPES = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+] as const;
+
+export const datePickerPropTypes = {
+  id: {
+    type: String,
+    required: true,
+    default: 'date-picker',
+  },
+  modelValue: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  label: {
+    type: String,
+    default: '',
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+  error: {
+    type: Boolean,
+    default: false,
+  },
+  currentYear: {
+    type: String,
+    default: new Date().getFullYear().toString(),
+  },
+  minMaxYear: {
+    type: Object as PropType<MinMaxYearType>,
+    default: () => ({
+      min: 1900,
+      max: new Date().getFullYear(),
+    }),
+  },
+  restDays: {
+    type: Array as PropType<RestDayType[]>,
+    validator: (value: RestDayType[]): boolean => {
+      return value.every((val) => REST_DAYS_TYPES.includes(val));
+    },
+    default: [],
+  },
+  disabledDates: {
+    type: Object as PropType<DisabledDatesType>,
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  placement: {
+    type: String as PropType<(typeof PLACEMENTS_TYPES)[number]>,
+    validator: (value: (typeof PLACEMENTS_TYPES)[number]) => PLACEMENTS_TYPES.includes(value),
+    default: 'bottom',
+  },
+  format: {
+    type: String,
+    default: 'MM-DD-YYYY',
+    description: 'Format for the selected date. For example: MM/DD/YYYY, YYYY-MM-DD, etc.',
+  },
+};
+
+export type RestDayType = (typeof REST_DAYS_TYPES)[number];
+
+export type DisabledDatesType = {
+  to: string;
+  from: string;
+  pastDates: boolean | string;
+  futureDates: boolean | string;
+  selectedDates: Array<string>;
+  weekends: boolean;
+  weekdays: boolean;
+  selectedDays: Array<string>;
+};
+
+export type MinMaxYearType = {
+  min: number;
+  max: number;
+};
+
+export const datePickerEmitTypes = {
+  'update:modelValue': (value: string) => typeof value === 'string',
+  getInputValue: (value: string | null) => value === null || typeof value === 'string',
+  getDateFormats: (value: Record<string, string>) => {
+    return (
+      typeof value === 'object' &&
+      value !== null &&
+      !Array.isArray(value) &&
+      Object.keys(value).every((key) => typeof value[key] === 'string')
+    );
+  },
+  getMonthList: (value: Array<object>) => Array.isArray(value),
+  getYearList: (value: Array<number>) => Array.isArray(value),
+  getDateErrors: (value: Array<{ title: string; message: string }>) => {
+    return (
+      Array.isArray(value) &&
+      value.every(
+        (item) =>
+          item !== null &&
+          typeof item === 'object' &&
+          typeof item.title === 'string' &&
+          typeof item.message === 'string',
+      )
+    );
+  },
+};
+
+export type DatePickerPropTypes = ExtractPropTypes<typeof datePickerPropTypes>;
+export type DatePickerEmitTypes = typeof datePickerEmitTypes;

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

@@ -1,106 +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();
-    });
-  });
-});
+// 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();
+    });
+  });
+});