design-system-next 2.11.20 → 2.12.1

package/src/components/chips/chips.ts

@@ -1,95 +1,95 @@
-import type { PropType, ExtractPropTypes } from 'vue';
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-const CHIPS_SIZE = ['lg', 'md', 'sm'] as const;
-export const ICON_WEIGHTS = ['regular', 'bold', 'thin', 'light', 'fill', 'duotone'] as const;
-const CHIPS_VARIANT = ['tag', 'day'] as const;
-const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] as const;
-
-export const chipsPropTypes = {
-  label: {
-    type: String,
-    default: '',
-  },
-  size: {
-    type: String,
-    validator: (value: (typeof CHIPS_SIZE)[number]) => CHIPS_SIZE.includes(value),
-    default: 'md',
-  },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-  active: {
-    type: Boolean,
-    default: false,
-  },
-  closable: {
-    type: Boolean,
-    default: false,
-  },
-  avatarUrl: {
-    type: String,
-    default: '',
-  },
-  avatarVariant: {
-    type: String,
-    default: '',
-  },
-  avatarInitials: {
-    type: String,
-    default: '',
-  },
-  icon: {
-    type: String,
-    default: '',
-  },
-  iconWeight: {
-    type: String as PropType<(typeof ICON_WEIGHTS)[number]>,
-    validator: (value: (typeof ICON_WEIGHTS)[number]) => ICON_WEIGHTS.includes(value),
-    default: 'regular',
-  },
-  closeIconSize: {
-    type: Number,
-    default: 16,
-  },
-  badge: {
-    type: Boolean,
-    default: false,
-  },
-  badgeText: {
-    type: String,
-    default: '0',
-  },
-  badgeVariant: {
-    type: String,
-    default: 'brand',
-  },
-  removable: {
-    type: Boolean,
-    default: false,
-  },
-  visible: {
-    type: Boolean,
-    default: true,
-  },
-  variant: {
-    type: String as PropType<(typeof CHIPS_VARIANT)[number]>,
-    validator: (value: (typeof CHIPS_VARIANT)[number]) => CHIPS_VARIANT.includes(value),
-    default: 'tag',
-  },
-  day: {
-    type: String as PropType<(typeof DAYS)[number]>,
-    default: 'Sunday',
-    validator: (value: string) => DAYS.includes(value as (typeof DAYS)[number]),
-  },
-};
-
-export type ChipsPropTypes = ExtractPropTypes<typeof chipsPropTypes>;
-
-export const chipsEmitTypes = {
-  close: (evt: MouseEvent | KeyboardEvent): boolean => evt instanceof MouseEvent || evt instanceof KeyboardEvent,
-  update: (value: boolean): value is boolean => typeof value === 'boolean',
-};
-export type ChipsEmitTypes = typeof chipsEmitTypes;
+import type { PropType, ExtractPropTypes } from 'vue';
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+const CHIPS_SIZE = ['lg', 'md', 'sm'] as const;
+export const ICON_WEIGHTS = ['regular', 'bold', 'thin', 'light', 'fill', 'duotone'] as const;
+const CHIPS_VARIANT = ['tag', 'day'] as const;
+const DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] as const;
+
+export const chipsPropTypes = {
+  label: {
+    type: String,
+    default: '',
+  },
+  size: {
+    type: String,
+    validator: (value: (typeof CHIPS_SIZE)[number]) => CHIPS_SIZE.includes(value),
+    default: 'md',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  active: {
+    type: Boolean,
+    default: false,
+  },
+  closable: {
+    type: Boolean,
+    default: false,
+  },
+  avatarUrl: {
+    type: String,
+    default: '',
+  },
+  avatarVariant: {
+    type: String,
+    default: '',
+  },
+  avatarInitials: {
+    type: String,
+    default: '',
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  iconWeight: {
+    type: String as PropType<(typeof ICON_WEIGHTS)[number]>,
+    validator: (value: (typeof ICON_WEIGHTS)[number]) => ICON_WEIGHTS.includes(value),
+    default: 'regular',
+  },
+  closeIconSize: {
+    type: Number,
+    default: 16,
+  },
+  badge: {
+    type: Boolean,
+    default: false,
+  },
+  badgeText: {
+    type: String,
+    default: '0',
+  },
+  badgeVariant: {
+    type: String,
+    default: 'brand',
+  },
+  removable: {
+    type: Boolean,
+    default: false,
+  },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+  variant: {
+    type: String as PropType<(typeof CHIPS_VARIANT)[number]>,
+    validator: (value: (typeof CHIPS_VARIANT)[number]) => CHIPS_VARIANT.includes(value),
+    default: 'tag',
+  },
+  day: {
+    type: String as PropType<(typeof DAYS)[number]>,
+    default: 'Sunday',
+    validator: (value: string) => DAYS.includes(value as (typeof DAYS)[number]),
+  },
+};
+
+export type ChipsPropTypes = ExtractPropTypes<typeof chipsPropTypes>;
+
+export const chipsEmitTypes = {
+  close: (evt: MouseEvent | KeyboardEvent): boolean => evt instanceof MouseEvent || evt instanceof KeyboardEvent,
+  update: (value: boolean): value is boolean => typeof value === 'boolean',
+};
+export type ChipsEmitTypes = typeof chipsEmitTypes;

package/src/components/collapsible/collapsible.ts

@@ -1,21 +1,21 @@
-import type { PropType, ExtractPropTypes } from "vue";
-
-export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
-
-export const collapsiblePropTypes = {
-  modelValue: {
-    type: Boolean,
-    required: true,
-  },
-  transitionDuration: {
-    type: Number,
-    default: 150, // Default transition duration in milliseconds
-  },
-};
-
-export const collapsibleEmitTypes = {
-  'update:modelValue': (value: boolean) => typeof value === 'boolean',
-};
-
-export type CollapsibleEmitTypes = typeof collapsibleEmitTypes
-export type CollapsibleProps = ExtractPropTypes<typeof collapsiblePropTypes>;
+import type { PropType, ExtractPropTypes } from "vue";
+
+export const definePropType = <T>(val: unknown): PropType<T> => val as PropType<T>;
+
+export const collapsiblePropTypes = {
+  modelValue: {
+    type: Boolean,
+    required: true,
+  },
+  transitionDuration: {
+    type: Number,
+    default: 150, // Default transition duration in milliseconds
+  },
+};
+
+export const collapsibleEmitTypes = {
+  'update:modelValue': (value: boolean) => typeof value === 'boolean',
+};
+
+export type CollapsibleEmitTypes = typeof collapsibleEmitTypes
+export type CollapsibleProps = ExtractPropTypes<typeof collapsiblePropTypes>;

package/src/components/collapsible/collapsible.vue

@@ -1,27 +1,27 @@
-<template>
-  <div :class="collapsibleClasses.container">
-    <slot name="trigger" :toggle-collapsible="toggleCollapsible" />
-    <Transition
-      :css="false"
-      @before-enter="onBeforeEnter"
-      @enter="onEnter"
-      @before-leave="onBeforeLeave"
-      @leave="onLeave"
-    >
-      <div v-show="modelValue" :style="contentStyle">
-        <slot />
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { collapsiblePropTypes, collapsibleEmitTypes } from './collapsible';
-import { useCollapsible } from './use-collapsible';
-
-const props = defineProps(collapsiblePropTypes);
-const emit = defineEmits(collapsibleEmitTypes);
-
-const { collapsibleClasses, contentStyle, toggleCollapsible, onBeforeEnter, onEnter, onBeforeLeave, onLeave } =
-  useCollapsible(props, emit);
-</script>
+<template>
+  <div :class="collapsibleClasses.container">
+    <slot name="trigger" :toggle-collapsible="toggleCollapsible" />
+    <Transition
+      :css="false"
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+    >
+      <div v-show="modelValue" :style="contentStyle">
+        <slot />
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { collapsiblePropTypes, collapsibleEmitTypes } from './collapsible';
+import { useCollapsible } from './use-collapsible';
+
+const props = defineProps(collapsiblePropTypes);
+const emit = defineEmits(collapsibleEmitTypes);
+
+const { collapsibleClasses, contentStyle, toggleCollapsible, onBeforeEnter, onEnter, onBeforeLeave, onLeave } =
+  useCollapsible(props, emit);
+</script>

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