design-system-next 2.24.2 → 2.26.0

package/src/App.vue

@@ -1,91 +1,3 @@
 <template>
-  <div class="spr-h-[600px] spr-w-[75%]">
-    <spr-table
-      action
-      :headers="headers"
-      :data-table="data" 
-      is-multi-select 
-      :selected-key-id="'name'" 
-      show-header-filter
-      @on-apply-filter="(filters) => console.log(filters)"
-    />
-  </div>
+  <div>Test Component Here</div>
 </template>
-
-<script setup lang="ts">
-import SprTable from './components/table/table.vue';
-import { ref } from 'vue';
-import { Header } from './components/table/table';
-
-const headers = ref<Header[]>([
-  { field: 'name', name: 'Role Name', sort: false, hasAvatar: true, hasSubtext: true, width: '250px', 
-    filterList: [
-      { text: 'Role 11', value: 'role11' },
-      { text: 'Role 12', value: 'role12' },
-      { text: 'Role 13', value: 'role13' },
-      { text: 'Role 14', value: 'role14' },
-      { text: 'Role 15', value: 'role15' }
-    ] 
-  },
-  { field: 'firstUpdate', name: 'Date', sort: false, hasAvatar: false, hasSubtext: false, width: '150px',
-    filterList: [
-      { text: 'Jan 10, 2025', value: 'jan10' },
-      { text: 'Jan 11, 2025', value: 'jan11' },
-      { text: 'Jan 12, 2025', value: 'jan12' },
-      { text: 'Jan 13, 2025', value: 'jan13' },
-      { text: 'Jan 14, 2025', value: 'jan14' }
-    ]
-  },
-  { field: 'lastUpdate', name: 'Date', sort: false, hasAvatar: false, hasSubtext: false, width: '150px',
-    filterList: [
-      { text: 'Dec 10, 2025', value: 'dec10' },
-      { text: 'Dec 11, 2025', value: 'dec11' },
-      { text: 'Dec 12, 2025', value: 'dec12' },
-      { text: 'Dec 13, 2025', value: 'dec13' },
-      { text: 'Dec 14, 2025', value: 'dec14' }
-    ]
-  },
-  { field: 'note', name: 'Note', sort: false, hasAvatar: false, hasSubtext: true, width: '300px',
-    filterList: [
-      { text: 'Note 11', value: 'note11' },
-      { text: 'Note 12', value: 'note12' },
-      { text: 'Note 13', value: 'note13' },
-      { text: 'Note 14', value: 'note14' },
-      { text: 'Note 15', value: 'note15' }
-    ]
-  },
-  { field: 'status', name: 'Status', sort: false, hasAvatar: false, hasSubtext: true, width: '200px',
-    filterList: [
-      { text: 'Success', value: 'success' },
-      { text: 'Pending', value: 'pending' },
-      { text: 'Error', value: 'error' }
-    ]
-  },
-]);
-
-const data = ref([
-  // 40 more elements
-  ...Array.from({ length: 50 }, (_, i) => ({
-    name: {
-      title: `Role ${i + 11}`,
-      subtext: `Subtext for role ${i + 11}`,
-    },
-    firstUpdate: {
-      title: `Jan ${10 + i}, 2025`,
-      subtext: `Subtext for date ${10 + i}`,
-    },
-    lastUpdate: {
-      title: `Dec ${10 + i}, 2025`,
-      subtext: `Subtext for date ${10 + i}`,
-    },
-    note: {
-      title: `Note  ${i + 11}`,
-      subtext: `Subtext for role ${i + 11}`,
-    },
-    status: {
-      title: ['Success', 'Pending', 'Error'][(i + 1) % 3],
-      subtext: `Status subtext ${i + 11}`,
-    },
-  })),
-]);
-</script>

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

@@ -59,6 +59,15 @@ export const datePickerPropTypes = {
   },
   minMaxYear: {
     type: Object as PropType<MinMaxYearType>,
+    validator: (value: MinMaxYearType): boolean => {
+      return (
+        value &&
+        typeof value.min === 'number' &&
+        typeof value.max === 'number' &&
+        value.min >= 1900 &&
+        value.min <= value.max
+      );
+    },
     default: () => ({
       min: 1900,
       max: new Date().getFullYear(),
@@ -146,18 +155,6 @@ export const datePickerEmitTypes = {
   },
   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>;

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

@@ -7,7 +7,7 @@
       :placement="props.placement"
       :triggers="[]"
       :popper-hide-triggers="[]"
-      :auto-hide="true"
+      :auto-hide="false"
       :disabled="isDatePickerPopperDisabled"
       :container="props.popperContainer ? props.popperContainer : `#${props.id}`"
       :strategy="

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

@@ -63,6 +63,15 @@ export const dateRangePickerPropTypes = {
   },
   minMaxYear: {
     type: Object as PropType<MinMaxYearType>,
+    validator: (value: MinMaxYearType): boolean => {
+      return (
+        value &&
+        typeof value.min === 'number' &&
+        typeof value.max === 'number' &&
+        value.min >= 1900 &&
+        value.min <= value.max
+      );
+    },
     default: () => ({
       min: 1900,
       max: new Date().getFullYear(),
@@ -174,18 +183,6 @@ export const dateRangePickerEmitTypes = {
   },
   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',
-      )
-    );
-  },
   rangeChange: (value: { startDate: string; endDate: string; isValid: boolean }) => {
     return (
       typeof value === 'object' &&

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

@@ -33,7 +33,10 @@ interface MonthsList {
 
 type DayAbbreviation = 'su' | 'mo' | 'tu' | 'we' | 'th' | 'fr' | 'sa';
 
-export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupContext<DateRangePickerEmitTypes>['emit']) => {
+export const useDateRangePicker = (
+  props: DateRangePickerPropTypes,
+  emit: SetupContext<DateRangePickerEmitTypes>['emit'],
+) => {
   const { active, disabled, readonly, error, currentYear, minMaxYear, restDays, disabledDates, format } = toRefs(props);
   const slots = useSlots();
 
@@ -152,7 +155,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
       text: dayjs().month(i).format('MMM'),
       fullText: dayjs().month(i).format('MMMM'),
       monthValue: i,
-    }))
+    })),
   );
 
   // Start date inputs
@@ -280,44 +283,43 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
   };
 
   const calendarTabIsSelectedDate = (day: { date: dayjs.Dayjs; inactive: boolean }) => {
-   
     const startDate = dayjs(modelValue.value.startDate).format('MM-DD-YYYY');
     const endDate = dayjs(modelValue.value.endDate).format('MM-DD-YYYY');
-    
+
     const dayDate = day.date.format('MM-DD-YYYY');
     // If only start date is selected, highlight it
     if (startDate && !endDate) {
       return dayDate === startDate;
     }
-    
+
     // If both dates are selected, highlight start and end
     if (startDate && endDate) {
       return dayDate === startDate || dayDate === endDate;
     }
-    
+
     return false;
   };
 
   const calendarTabIsInRange = (day: { date: dayjs.Dayjs; inactive: boolean }) => {
     const startDate = modelValue.value.startDate;
     const endDate = modelValue.value.endDate;
-    
+
     // Only show range when both dates are selected
     if (!startDate || !endDate) return false;
-    
+
     const dayDate = day.date;
     const start = dayjs(startDate, 'MM-DD-YYYY');
     const end = dayjs(endDate, 'MM-DD-YYYY');
-    
+
     return dayDate.isAfter(start, 'day') && dayDate.isBefore(end, 'day');
   };
 
   const calendarTabIsUnSelectedDate = (day: { date: dayjs.Dayjs }) => {
     const startDate = modelValue.value.startDate;
     const endDate = modelValue.value.endDate;
-    
+
     if (!startDate || !endDate) return true;
-    
+
     const dayDate = day.date.format('MM-DD-YYYY');
     return dayDate !== startDate && dayDate !== endDate;
   };
@@ -346,12 +348,12 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
     if (!safeDisabledDates.value?.pastDates) return false;
     const dayDate = day.date;
     const currentDate = dayjs();
-    
+
     if (typeof safeDisabledDates.value.pastDates === 'string') {
       const pastDate = dayjs(safeDisabledDates.value.pastDates, 'MM-DD-YYYY');
       return dayDate.isBefore(pastDate, 'day');
     }
-    
+
     return dayDate.isBefore(currentDate, 'day');
   };
 
@@ -359,12 +361,12 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
     if (!safeDisabledDates.value?.futureDates) return false;
     const dayDate = day.date;
     const currentDate = dayjs();
-    
+
     if (typeof safeDisabledDates.value.futureDates === 'string') {
       const futureDate = dayjs(safeDisabledDates.value.futureDates, 'MM-DD-YYYY');
       return dayDate.isAfter(futureDate, 'day');
     }
-    
+
     return dayDate.isAfter(currentDate, 'day');
   };
 
@@ -395,9 +397,9 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
   // Update calendarTabHandleDateInput to use format.value
   const calendarTabHandleDateInput = (day: { date: dayjs.Dayjs }) => {
     if (calendarTabIsDateIsDisabled(day)) return;
-    
+
     const selectedDate = dayjs(day.date).format(format.value);
-    
+
     // If no start date is selected, set it as start date
     if (!modelValue.value.startDate) {
       modelValue.value = {
@@ -431,7 +433,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
       };
       selectionMode.value = 'end';
     }
-    
+
     updateInputFields();
     emitRangeChange();
   };
@@ -477,7 +479,10 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
   };
 
   const yearTabGoToNextPage = () => {
-    if ((yearTabPageData.value.currentPage + 1) * yearTabPageData.value.itemsPerPage < yearTabPageData.value.yearsArray.length) {
+    if (
+      (yearTabPageData.value.currentPage + 1) * yearTabPageData.value.itemsPerPage <
+      yearTabPageData.value.yearsArray.length
+    ) {
       yearTabPageData.value.currentPage++;
     }
   };
@@ -488,7 +493,8 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
 
   const yearTabIsNextButtonDisabled = computed(() => {
     return (
-      (yearTabPageData.value.currentPage + 1) * yearTabPageData.value.itemsPerPage >= yearTabPageData.value.yearsArray.length
+      (yearTabPageData.value.currentPage + 1) * yearTabPageData.value.itemsPerPage >=
+      yearTabPageData.value.yearsArray.length
     );
   });
 
@@ -551,7 +557,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
   const setModelValue = () => {
     const startDateValid = validateDate(startMonthInput.value, startDateInput.value, startYearInput.value);
     const endDateValid = validateDate(endMonthInput.value, endDateInput.value, endYearInput.value);
-    
+
     if (startDateValid && endDateValid) {
       const startDate = `${startMonthInput.value}-${startDateInput.value}-${startYearInput.value}`;
       const endDate = `${endMonthInput.value}-${endDateInput.value}-${endYearInput.value}`;
@@ -572,25 +578,25 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
 
   const validateDate = (month: string, date: string, year: string): boolean => {
     if (!month || !date || !year) return false;
-    
+
     const monthObj = getMonthObject('monthValue', month);
     if (!monthObj) {
       setWarningPropsValue('startDate');
       return false;
     }
-    
+
     const dayjsDate = dayjs(`${monthObj.monthValue + 1}-${date}-${year}`, 'M-D-YYYY');
     if (!dayjsDate.isValid()) {
       setWarningPropsValue('startDate');
       return false;
     }
-    
+
     const yearNum = Number(year);
     if (yearNum < minMaxYear.value.min || yearNum > minMaxYear.value.max) {
       setWarningPropsValue('year');
       return false;
     }
-    
+
     clearWarningPropsValue('startDate');
     clearWarningPropsValue('year');
     return true;
@@ -668,9 +674,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
 
   const handleConvertMonthIfValid = (type: 'start' | 'end') => {
     const monthInput = type === 'start' ? startMonthInput.value : endMonthInput.value;
-    const monthObj = monthsList.value.find(
-      (month) => month.text.toLowerCase() === monthInput.toLowerCase(),
-    );
+    const monthObj = monthsList.value.find((month) => month.text.toLowerCase() === monthInput.toLowerCase());
 
     if (monthObj) {
       if (type === 'start') {
@@ -719,7 +723,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
       startDateInput.value = startDate.format('DD');
       startYearInput.value = startDate.format('YYYY');
     }
-    
+
     if (modelValue.value.endDate) {
       const endDate = dayjs(modelValue.value.endDate, 'MM-DD-YYYY');
       endMonthInput.value = endDate.format('MMM');
@@ -741,7 +745,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
     if (modelValue.value.startDate && modelValue.value.endDate) {
       const startDate = dayjs(modelValue.value.startDate, 'MM-DD-YYYY');
       const endDate = dayjs(modelValue.value.endDate, 'MM-DD-YYYY');
-      
+
       const formats = {
         'MM-DD-YYYY': {
           startDate: startDate.format('MM-DD-YYYY'),
@@ -760,7 +764,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
           endDate: endDate.format('DD-MM-YYYY'),
         },
       };
-      
+
       emit('getDateFormats', formats);
     }
   };
@@ -782,21 +786,32 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
     emit('getYearList', years);
   };
 
-  const emitDateErrors = () => {
-    emit('getDateErrors', dateRangePickerErrors.value);
-  };
-
   // #region - Watchers
-  watch(modelValue, () => {
-    updateInputFields();
-    emitDateFormats();
-    emitInputValue();
-    emitDateErrors();
-  }, { deep: true });
+  watch(
+    modelValue,
+    () => {
+      updateInputFields();
+      emitDateFormats();
+      emitInputValue();
+    },
+    { deep: true },
+  );
+
+  watch(dateRangePickerErrors, () => {}, { deep: true });
 
-  watch(dateRangePickerErrors, () => {
-    emitDateErrors();
-  }, { deep: true });
+  watch(
+    minMaxYear,
+    () => {
+      yearTabPageData.value.yearsArray = Array.from(
+        { length: minMaxYear.value.max - minMaxYear.value.min + 1 },
+        (_, index) => minMaxYear.value.min + index,
+      ).filter((year) => year <= minMaxYear.value.max && year >= minMaxYear.value.min);
+
+      yearTabPageData.value.currentPage = 0;
+      emitYearList();
+    },
+    { deep: true },
+  );
 
   // #region - Lifecycle
   onMounted(() => {
@@ -842,7 +857,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
     if (basePlacement !== 'top' && basePlacement !== 'bottom') {
       basePlacement = 'bottom';
     }
-    
+
     if (clickedInputType.value === 'start') {
       // For start date: concatenate base placement with 'start'
       return `${basePlacement}-start`;
@@ -864,7 +879,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
   // Handle start date input clicks
   const handleStartDateClick = () => {
     if (disabled.value || readonly.value) return;
-    
+
     clickedInputType.value = 'start';
     activeInputRef.value = startDateContainerRef.value;
     datePopperState.value = true;
@@ -873,7 +888,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
   // Handle end date input clicks
   const handleEndDateClick = () => {
     if (disabled.value || readonly.value) return;
-    
+
     clickedInputType.value = 'end';
     activeInputRef.value = endDateContainerRef.value;
     datePopperState.value = true;
@@ -882,7 +897,7 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
   // Handle custom component clicks (for slot usage)
   const handleCustomComponentClick = (event: Event) => {
     if (disabled.value || readonly.value) return;
-    
+
     // For custom slots, use the clicked element as reference
     activeInputRef.value = event.currentTarget as HTMLElement;
     datePopperState.value = true;
@@ -954,4 +969,4 @@ export const useDateRangePicker = (props: DateRangePickerPropTypes, emit: SetupC
     handleEndDateClick,
     handleCustomComponentClick,
   };
-}; 
+};

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

@@ -0,0 +1,134 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+
+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 monthYearPickerPropTypes = {
+  id: {
+    type: String,
+    required: true,
+  },
+  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>,
+    validator: (value: MinMaxYearType): boolean => {
+      return (
+        value &&
+        typeof value.min === 'number' &&
+        typeof value.max === 'number' &&
+        value.min >= 1900 &&
+        value.min <= value.max
+      );
+    },
+    default: () => ({
+      min: 1900,
+      max: new Date().getFullYear(),
+    }),
+  },
+  displayHelper: {
+    type: Boolean,
+    default: false,
+  },
+  helperText: {
+    type: String,
+    default: '',
+  },
+  helperIcon: {
+    type: String,
+    default: null,
+  },
+  width: {
+    type: String,
+    default: '100%',
+  },
+  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-YYYY',
+    description: 'Format for the selected month and year. For example: MM-YYYY, YYYY-MM, MMMM YYYY, etc.',
+  },
+  wrapperPosition: {
+    type: String,
+    default: 'relative',
+  },
+  popperStrategy: {
+    type: String,
+    validator: (value: 'fixed' | 'absolute') => POPPER_STRATEGY_TYPES.includes(value),
+    default: 'absolute',
+  },
+  popperContainer: {
+    type: String,
+    default: '',
+  },
+};
+
+export type MinMaxYearType = {
+  min: number;
+  max: number;
+};
+
+export const monthYearPickerEmitTypes = {
+  '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),
+};
+
+export type MonthYearPickerPropTypes = ExtractPropTypes<typeof monthYearPickerPropTypes>;
+export type MonthYearPickerEmitTypes = typeof monthYearPickerEmitTypes;