design-system-next 2.11.17 → 2.11.18

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

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