@coreui/vue-pro 5.8.1 → 5.10.0

package/src/components/calendar/utils.ts

@@ -1,16 +1,24 @@
-export const convertIsoWeekToDate = (isoWeek: string) => {
-  const [year, week] = isoWeek.split(/w/i)
-  // Get date for 4th of January for year
-  const date = new Date(Number(year), 0, 4)
-  // Get previous Monday, add 7 days for each week after first
+import type { DisabledDate, SelectionTypes, ViewTypes } from './types'
+
+/**
+ * Converts an ISO week string to a Date object representing the Monday of that week.
+ * @param isoWeek - The ISO week string (e.g., "2023W05" or "2023w05").
+ * @returns The Date object for the Monday of the specified week, or null if invalid.
+ */
+export const convertIsoWeekToDate = (isoWeek: string): Date => {
+  const [year, week] = isoWeek.split(/[Ww]/)
+  const date = new Date(Number(year), 0, 4) // 4th Jan is always in week 1
   date.setDate(date.getDate() - (date.getDay() || 7) + 1 + (Number(week) - 1) * 7)
   return date
 }
 
-export const convertToDateObject = (
-  date: Date | string,
-  selectionType?: 'day' | 'week' | 'month' | 'year',
-) => {
+/**
+ * Converts a date string or Date object to a Date object based on selection type.
+ * @param date - The date to convert.
+ * @param selectionType - The type of selection ('day', 'week', 'month', 'year').
+ * @returns The corresponding Date object or null if invalid.
+ */
+export const convertToDateObject = (date: Date | string, selectionType?: SelectionTypes): Date => {
   if (date instanceof Date) {
     return date
   }
@@ -28,12 +36,12 @@ export const convertToDateObject = (
   return new Date(Date.parse(date))
 }
 
-export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
-  d.toLocaleDateString(locale, options)
-
-export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
-  d.toLocaleTimeString(locale, options)
-
+/**
+ * Creates groups from an array.
+ * @param arr - The array to group.
+ * @param numberOfGroups - Number of groups to create.
+ * @returns An array of grouped arrays.
+ */
 export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][] => {
   const perGroup = Math.ceil(arr.length / numberOfGroups)
   return Array.from({ length: numberOfGroups })
@@ -41,11 +49,14 @@ export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][]
     .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
 }
 
-export const getCalendarDate = (
-  calendarDate: Date,
-  order: number,
-  view: 'days' | 'months' | 'years',
-) => {
+/**
+ * Adjusts the calendar date based on order and view type.
+ * @param calendarDate - The current calendar date.
+ * @param order - The order to adjust by.
+ * @param view - The current view type.
+ * @returns The adjusted Date object.
+ */
+export const getCalendarDate = (calendarDate: Date, order: number, view: ViewTypes): Date => {
   if (order !== 0 && view === 'days') {
     return new Date(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1)
   }
@@ -61,14 +72,16 @@ export const getCalendarDate = (
   return calendarDate
 }
 
-export const getCurrentYear = () => new Date().getFullYear()
-
-export const getCurrentMonth = () => new Date().getMonth()
-
+/**
+ * Formats a date based on the selection type.
+ * @param date - The date to format.
+ * @param selectionType - The type of selection ('day', 'week', 'month', 'year').
+ * @returns A formatted date string or the original Date object.
+ */
 export const getDateBySelectionType = (
   date: Date | null,
-  selectionType: 'day' | 'week' | 'month' | 'year',
-) => {
+  selectionType: SelectionTypes,
+): string | Date | null => {
   if (date === null) {
     return null
   }
@@ -89,36 +102,89 @@ export const getDateBySelectionType = (
   return date
 }
 
-export const getMonthName = (month: number, locale: string) => {
-  const d = new Date()
-  d.setDate(1)
-  d.setMonth(month)
-  return d.toLocaleString(locale, { month: 'long' })
-}
+/**
+ * Retrieves the first available date within a range that is not disabled.
+ * @param startDate - Start date of the range.
+ * @param endDate - End date of the range.
+ * @param min - Minimum allowed date.
+ * @param max - Maximum allowed date.
+ * @param disabledDates - Criteria for disabled dates.
+ * @returns The first available Date object or null if none found.
+ */
+export const getFirstAvailableDateInRange = (
+  startDate: Date,
+  endDate: Date,
+  min?: Date | null,
+  max?: Date | null,
+  disabledDates?: DisabledDate | DisabledDate[],
+): Date | null => {
+  const _min = min ? new Date(Math.max(startDate.getTime(), min.getTime())) : startDate
+  const _max = max ? new Date(Math.min(endDate.getTime(), max.getTime())) : endDate
 
-export const getMonthsNames = (locale: string) => {
-  const months = []
-  const d = new Date()
-  d.setDate(1)
+  if (disabledDates === undefined) {
+    return _min
+  }
 
-  for (let i = 0; i < 12; i++) {
-    d.setMonth(i)
-    months.push(d.toLocaleString(locale, { month: 'short' }))
+  for (
+    const currentDate = new Date(_min);
+    currentDate <= _max;
+    currentDate.setDate(currentDate.getDate() + 1)
+  ) {
+    if (!isDateDisabled(currentDate, min, max, disabledDates)) {
+      return currentDate
+    }
   }
 
-  return months
+  return null
 }
 
-export const getYears = (year: number) => {
-  const years = []
-  for (let _year = year - 6; _year < year + 6; _year++) {
-    years.push(_year)
-  }
+/**
+ * Retrieves an array of month names based on locale and format.
+ * @param locale - The locale string (e.g., 'en-US').
+ * @param format - The format of the month names ('short' or 'long').
+ * @returns An array of month names.
+ */
+export const getMonthsNames = (locale: string, format: 'short' | 'long' = 'short'): string[] => {
+  return Array.from({ length: 12 }, (_, i) => {
+    return new Date(2000, i, 1).toLocaleString(locale, { month: format })
+  })
+}
 
-  return years
+/**
+ * Retrieves an array of selectable dates from the given element.
+ * @param element - The HTML element to search for selectable dates.
+ * @param selector - The CSS selector used to identify selectable dates. Defaults to 'tr[tabindex="0"], td[tabindex="0"]'.
+ * @returns An array of HTMLElements representing the selectable dates.
+ */
+export const getSelectableDates = (
+  element: HTMLElement,
+  selector: string = 'tr[tabindex="0"], td[tabindex="0"]',
+) => {
+  return [...Element.prototype.querySelectorAll.call(element, selector)] as HTMLElement[]
 }
 
-const getLeadingDays = (year: number, month: number, firstDayOfWeek: number) => {
+/**
+ * Generates an array of years centered around a given year.
+ * @param year - The central year.
+ * @param range - The number of years before and after the central year.
+ * @returns An array of years.
+ */
+export const getYears = (year: number, range: number = 6): number[] => {
+  return Array.from({ length: range * 2 }, (_, i) => year - range + i)
+}
+
+/**
+ * Retrieves leading days (from the previous month) for a calendar view.
+ * @param year - The year.
+ * @param month - The month (0-11).
+ * @param firstDayOfWeek - The first day of the week (0-6, where 0 is Sunday).
+ * @returns An array of leading day objects.
+ */
+const getLeadingDays = (
+  year: number,
+  month: number,
+  firstDayOfWeek: number,
+): { date: Date; month: string }[] => {
   // 0: sunday
   // 1: monday
   const dates = []
@@ -142,7 +208,13 @@ const getLeadingDays = (year: number, month: number, firstDayOfWeek: number) =>
   return dates
 }
 
-const getMonthDays = (year: number, month: number) => {
+/**
+ * Retrieves all days within a specific month.
+ * @param year - The year.
+ * @param month - The month (0-11).
+ * @returns An array of day objects.
+ */
+const getMonthDays = (year: number, month: number): { date: Date; month: string }[] => {
   const dates = []
   const lastDay = new Date(year, month + 1, 0).getDate()
   for (let i = 1; i <= lastDay; i++) {
@@ -155,6 +227,14 @@ const getMonthDays = (year: number, month: number) => {
   return dates
 }
 
+/**
+ * Retrieves trailing days (from the next month) for a calendar view.
+ * @param year - The year.
+ * @param month - The month (0-11).
+ * @param leadingDays - Array of leading day objects.
+ * @param monthDays - Array of current month day objects.
+ * @returns An array of trailing day objects.
+ */
 const getTrailingDays = (
   year: number,
   month: number,
@@ -173,17 +253,38 @@ const getTrailingDays = (
   return dates
 }
 
-export const getWeekNumber = (date: Date) => {
-  const week1 = new Date(date.getFullYear(), 0, 4)
-  return (
-    1 +
-    Math.round(
-      ((date.getTime() - week1.getTime()) / 86_400_000 - 3 + ((week1.getDay() + 6) % 7)) / 7,
-    )
-  )
+/**
+ * Calculates the ISO week number for a given date.
+ * @param date - The date to calculate the week number for.
+ * @returns The ISO week number.
+ */
+export const getWeekNumber = (date: Date): number => {
+  const tempDate = new Date(date.getTime())
+  tempDate.setHours(0, 0, 0, 0)
+
+  // Thursday in current week decides the year
+  tempDate.setDate(tempDate.getDate() + 3 - ((tempDate.getDay() + 6) % 7))
+
+  const week1 = new Date(tempDate.getFullYear(), 0, 4)
+
+  // Calculate full weeks to the date
+  const weekNumber = 1 + Math.round((tempDate.getTime() - week1.getTime()) / 86_400_000 / 7)
+
+  return weekNumber
 }
 
-export const getMonthDetails = (year: number, month: number, firstDayOfWeek: number) => {
+/**
+ * Retrieves detailed information about each week in a month for calendar rendering.
+ * @param year - The year.
+ * @param month - The month (0-11).
+ * @param firstDayOfWeek - The first day of the week (0-6, where 0 is Sunday).
+ * @returns An array of week objects containing week numbers and day details.
+ */
+export const getMonthDetails = (
+  year: number,
+  month: number,
+  firstDayOfWeek: number,
+): { weekNumber?: number; days: { date: Date; month: string }[] }[] => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
   const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
@@ -207,18 +308,112 @@ export const getMonthDetails = (year: number, month: number, firstDayOfWeek: num
   return weeks
 }
 
+/**
+ * Checks if a date is disabled based on the 'date' period type.
+ * @param date - The date to check.
+ * @param min - Minimum allowed date.
+ * @param max - Maximum allowed date.
+ * @param disabledDates - Criteria for disabled dates.
+ * @returns True if the date is disabled, false otherwise.
+ */
+export const isDateDisabled = (
+  date: Date,
+  min?: Date | null,
+  max?: Date | null,
+  disabledDates?: DisabledDate | DisabledDate[],
+): boolean => {
+  if (min && date < min) {
+    return true
+  }
+
+  if (max && date > max) {
+    return true
+  }
+
+  if (disabledDates === undefined) {
+    return false
+  }
+
+  if (typeof disabledDates === 'function') {
+    return disabledDates(date)
+  }
+
+  if (disabledDates instanceof Date && isSameDateAs(date, disabledDates)) {
+    return true
+  }
+
+  if (Array.isArray(disabledDates) && disabledDates) {
+    for (const _date of disabledDates) {
+      if (typeof _date === 'function' && _date(date)) {
+        return true
+      }
+
+      if (Array.isArray(_date) && isDateInRange(date, _date[0], _date[1])) {
+        return true
+      }
+
+      if (_date instanceof Date && isSameDateAs(date, _date)) {
+        return true
+      }
+    }
+  }
+
+  return false
+}
+
+/**
+ * Checks if a date is within a specified range.
+ * @param date - The date to check.
+ * @param start - Start date of the range.
+ * @param end - End date of the range.
+ * @returns True if the date is within the range, false otherwise.
+ */
+export const isDateInRange = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const _date = removeTimeFromDate(date)
+  const _start = start ? removeTimeFromDate(start) : null
+  const _end = end ? removeTimeFromDate(end) : null
+
+  return !!(_start && _end && _start <= _date && _date <= _end)
+}
+
+/**
+ * Checks if a date is selected based on start and end dates.
+ * @param date - The date to check.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the date is selected, false otherwise.
+ */
+export const isDateSelected = (date: Date, start: Date | null, end: Date | null): boolean => {
+  if (start !== null && isSameDateAs(start, date)) {
+    return true
+  }
+
+  if (end !== null && isSameDateAs(end, date)) {
+    return true
+  }
+
+  return false
+}
+
+/**
+ * Determines if any date within a range is disabled.
+ * @param startDate - Start date of the range.
+ * @param endDate - End date of the range.
+ * @param disabledDates - Criteria for disabled dates.
+ * @returns True if any date in the range is disabled, false otherwise.
+ */
 export const isDisableDateInRange = (
   startDate?: Date | null,
   endDate?: Date | null,
-  dates?: Date[] | Date[][] | (Date | Date[])[],
-) => {
+  disabledDates?: DisabledDate | DisabledDate[],
+): boolean => {
   if (startDate && endDate) {
     const date = new Date(startDate)
     let disabled = false
 
     while (date < endDate) {
       date.setDate(date.getDate() + 1)
-      if (isDateDisabled(date, null, null, dates)) {
+      if (isDateDisabled(date, null, null, disabledDates)) {
         disabled = true
         break
       }
@@ -230,61 +425,100 @@ export const isDisableDateInRange = (
   return false
 }
 
-export const isDateDisabled = (
+/**
+ * Checks if a month is disabled based on the 'month' period type.
+ * @param date - The date representing the month to check.
+ * @param min - Minimum allowed date.
+ * @param max - Maximum allowed date.
+ * @param disabledDates - Criteria for disabled dates.
+ * @returns True if the month is disabled, false otherwise.
+ */
+export const isMonthDisabled = (
   date: Date,
   min?: Date | null,
   max?: Date | null,
-  dates?: Date[] | Date[][] | (Date | Date[])[],
+  disabledDates?: DisabledDate | DisabledDate[],
 ) => {
-  let disabled
-  if (dates) {
-    dates.forEach((_date: Date | Date[]) => {
-      if (Array.isArray(_date) && isDateInRange(date, _date[0], _date[1])) {
-        disabled = true
-      }
+  const current = date.getFullYear() * 12 + date.getMonth()
+  const _min = min ? min.getFullYear() * 12 + min.getMonth() : null
+  const _max = max ? max.getFullYear() * 12 + max.getMonth() : null
 
-      if (_date instanceof Date && isSameDateAs(date, _date)) {
-        disabled = true
-      }
-    })
+  if (_min && current < _min) {
+    return true
   }
 
-  if (min && date < min) {
-    disabled = true
+  if (_max && current > _max) {
+    return true
   }
 
-  if (max && date > max) {
-    disabled = true
+  if (disabledDates === undefined) {
+    return false
   }
 
-  return disabled
-}
-
-export const isDateInRange = (date: Date, start: Date | null, end: Date | null) => {
-  const _date = removeTimeFromDate(date)
-  const _start = start ? removeTimeFromDate(start) : null
-  const _end = end ? removeTimeFromDate(end) : null
+  const start = min ? Math.max(date.getTime(), min.getTime()) : date
+  const end = max
+    ? Math.min(date.getTime(), max.getTime())
+    : new Date(new Date().getFullYear(), 11, 31)
+
+  for (
+    const currentDate = new Date(start);
+    currentDate <= end;
+    currentDate.setDate(currentDate.getDate() + 1)
+  ) {
+    if (!isDateDisabled(currentDate, min, max, disabledDates)) {
+      return false
+    }
+  }
 
-  return _start && _end && _start <= _date && _date <= _end
+  return false
 }
 
-export const isDateSelected = (date: Date, start: Date | null, end: Date | null) => {
-  return (start && isSameDateAs(start, date)) || (end && isSameDateAs(end, date))
-}
+/**
+ * Checks if a month is selected based on start and end dates.
+ * @param date - The date representing the month.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the month is selected, false otherwise.
+ */
+export const isMonthSelected = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const year = date.getFullYear()
+  const month = date.getMonth()
+
+  if (start !== null && year === start.getFullYear() && month === start.getMonth()) {
+    return true
+  }
 
-export const isEndDate = (date: Date, start: Date | null, end: Date | null) => {
-  return start && end && isSameDateAs(end, date) && start < end
-}
+  if (end !== null && year === end.getFullYear() && month === end.getMonth()) {
+    return true
+  }
 
-export const isLastDayOfMonth = (date: Date) => {
-  const test = new Date(date.getTime())
-  const month = test.getMonth()
+  return false
+}
 
-  test.setDate(test.getDate() + 1)
-  return test.getMonth() !== month
+/**
+ * Checks if a month is within a specified range.
+ * @param date - The date representing the month.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the month is within the range, false otherwise.
+ */
+export const isMonthInRange = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const _start = start ? start.getFullYear() * 12 + start.getMonth() : null
+  const _end = end ? end.getFullYear() * 12 + end.getMonth() : null
+  const _date = year * 12 + month
+
+  return !!(_start && _end && _start <= _date && _date <= _end)
 }
 
-export const isSameDateAs = (date: Date | null, date2: Date | null) => {
+/**
+ * Checks if two dates are the same calendar date.
+ * @param date - First date.
+ * @param date2 - Second date.
+ * @returns True if both dates are the same, false otherwise.
+ */
+export const isSameDateAs = (date: Date | null, date2: Date | null): boolean => {
   if (date instanceof Date && date2 instanceof Date) {
     return (
       date.getDate() === date2.getDate() &&
@@ -300,23 +534,107 @@ export const isSameDateAs = (date: Date | null, date2: Date | null) => {
   return false
 }
 
-export const isStartDate = (date: Date, start: Date | null, end: Date | null) => {
-  return start && end && isSameDateAs(start, date) && start < end
+/**
+ * Checks if a date is today.
+ * @param date - The date to check.
+ * @returns True if the date is today, false otherwise.
+ */
+export const isToday = (date: Date): boolean => {
+  const today = new Date()
+  return isSameDateAs(date, today)
 }
 
-export const isToday = (date: Date) => {
-  const today = new Date()
-  return (
-    date.getDate() === today.getDate() &&
-    date.getMonth() === today.getMonth() &&
-    date.getFullYear() === today.getFullYear()
-  )
+/**
+ * Checks if a year is disabled based on the 'year' period type.
+ * @param date - The date representing the year to check.
+ * @param min - Minimum allowed date.
+ * @param max - Maximum allowed date.
+ * @param disabledDates - Criteria for disabled dates.
+ * @returns True if the year is disabled, false otherwise.
+ */
+export const isYearDisabled = (
+  date: Date,
+  min?: Date | null,
+  max?: Date | null,
+  disabledDates?: DisabledDate | DisabledDate[],
+) => {
+  const year = date.getFullYear()
+  const minYear = min ? min.getFullYear() : null
+  const maxYear = max ? max.getFullYear() : null
+
+  if (minYear && year < minYear) {
+    return true
+  }
+
+  if (maxYear && year > maxYear) {
+    return true
+  }
+
+  if (disabledDates === undefined) {
+    return false
+  }
+
+  const start = min ? Math.max(date.getTime(), min.getTime()) : date
+  const end = max
+    ? Math.min(date.getTime(), max.getTime())
+    : new Date(new Date().getFullYear(), 11, 31)
+
+  for (
+    const currentDate = new Date(start);
+    currentDate <= end;
+    currentDate.setDate(currentDate.getDate() + 1)
+  ) {
+    if (!isDateDisabled(currentDate, min, max, disabledDates)) {
+      return false
+    }
+  }
+
+  return false
+}
+
+/**
+ * Checks if a year is selected based on start and end dates.
+ * @param date - The date representing the year.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the year matches the start's or end's year, false otherwise.
+ */
+export const isYearSelected = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const year = date.getFullYear()
+
+  if (start !== null && year === start.getFullYear()) {
+    return true
+  }
+
+  if (end !== null && year === end.getFullYear()) {
+    return true
+  }
+
+  return false
 }
 
-export const isValidDate = (date: string) => {
-  const d = new Date(date)
-  return d instanceof Date && d.getTime()
+/**
+ * Checks if a year is within a specified range.
+ * @param date - The date representing the year.
+ * @param start - Start date.
+ * @param end - End date.
+ * @returns True if the year's value lies between start's year and end's year, false otherwise.
+ */
+export const isYearInRange = (date: Date, start: Date | null, end: Date | null): boolean => {
+  const year = date.getFullYear()
+  const _start = start ? start.getFullYear() : null
+  const _end = end ? end.getFullYear() : null
+
+  return !!(_start && _end && _start <= year && year <= _end)
 }
 
-export const removeTimeFromDate = (date: Date) =>
-  new Date(date.getFullYear(), date.getMonth(), date.getDate())
+/**
+ * Removes the time component from a Date object.
+ * @param date - The original date.
+ * @returns A new Date object with the time set to 00:00:00.
+ */
+export const removeTimeFromDate = (date: Date): Date => {
+  const clearedDate = new Date(date)
+  clearedDate.setHours(0, 0, 0, 0)
+  return clearedDate
+}

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

@@ -3,6 +3,7 @@ import { defineComponent, h, PropType } from 'vue'
 import { CDateRangePicker } from '../date-range-picker/'
 
 import { Color } from '../props'
+import type { DisabledDate } from '../calendar/types'
 
 const CDatePicker = defineComponent({
   name: 'CDatePicker',
@@ -165,9 +166,7 @@ const CDatePicker = defineComponent({
     /**
      * Specify the list of dates that cannot be selected.
      */
-    disabledDates: {
-      type: Array as PropType<Date[] | Date[][]>,
-    },
+    disabledDates: [Array, Date, Function] as PropType<DisabledDate | DisabledDate[]>,
     /**
      * Initial selected date.
      */