@coreui/vue-pro 4.10.4 → 5.0.0-alpha.1

package/src/components/calendar/utils.ts

@@ -1,3 +1,32 @@
+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
+  date.setDate(date.getDate() - (date.getDay() || 7) + 1 + (Number(week) - 1) * 7)
+  return date
+}
+
+export const convertToDateObject = (
+  date: Date | string | null,
+  selectionType?: 'day' | 'week' | 'month' | 'year',
+) => {
+  // TODO: clean-up ?
+  // if (date === null) {
+  //   return null
+  // }
+
+  if (date instanceof Date) {
+    return date
+  }
+
+  if (selectionType === 'week') {
+    return convertIsoWeekToDate(date as string)
+  }
+
+  return new Date(Date.parse(date))
+}
+
 export const convertToLocalDate = (d: Date, locale: string, options = {}) =>
   d.toLocaleDateString(locale, options)
 
@@ -6,59 +35,53 @@ export const convertToLocalTime = (d: Date, locale: string, options = {}) =>
 
 export const createGroupsInArray = <T>(arr: T[], numberOfGroups: number): T[][] => {
   const perGroup = Math.ceil(arr.length / numberOfGroups)
-  return new Array(numberOfGroups)
+  return Array.from({ length: numberOfGroups })
     .fill('')
     .map((_, i) => arr.slice(i * perGroup, (i + 1) * perGroup))
 }
 
+export const getCalendarDate = (calendarDate: Date, order: number, view: 'days' | 'months' | 'years') => {
+  if (order !== 0 && view === 'days') {
+    return new Date(Date.UTC(calendarDate.getFullYear(), calendarDate.getMonth() + order, 1))
+  }
+
+  if (order !== 0 && view === 'months') {
+    return new Date(Date.UTC(calendarDate.getFullYear() + order, calendarDate.getMonth(), 1))
+  }
+
+  if (order !== 0 && view === 'years') {
+    return new Date(Date.UTC(calendarDate.getFullYear() + (12 * order), calendarDate.getMonth(), 1))
+  }
+
+  return calendarDate
+}
+
 export const getCurrentYear = () => new Date().getFullYear()
 
 export const getCurrentMonth = () => new Date().getMonth()
 
-export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
-  const date = new Date(2013, 11, 31, 17, 19, 22)
-  let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
-  regex = regex
-    .replace('2013', '(?<year>[0-9]{2,4})')
-    .replace('12', '(?<month>[0-9]{1,2})')
-    .replace('31', '(?<day>[0-9]{1,2})')
-
-  if (time) {
-    regex = regex
-      .replace('5', '(?<hour>[0-9]{1,2})')
-      .replace('17', '(?<hour>[0-9]{1,2})')
-      .replace('19', '(?<minute>[0-9]{1,2})')
-      .replace('22', '(?<second>[0-9]{1,2})')
-      .replace('PM', '(?<ampm>[A-Z]{2})')
+export const getDateBySelectionType = (
+  date: Date | null,
+  selectionType: 'day' | 'week' | 'month' | 'year',
+) => {
+  if (date === null) {
+    return null
+  }
+
+  if (selectionType === 'week') {
+    return `${date.getFullYear()}W${getWeekNumber(date)}`
+  }
+
+  if (selectionType === 'month') {
+    const monthNumber = `0${date.getMonth() + 1}`.slice(-2)
+    return `${date.getFullYear()}-${monthNumber}`
+  }
+
+  if (selectionType === 'year') {
+    return `${date.getFullYear()}`
   }
 
-  const rgx = RegExp(`${regex}`)
-  const partials = string.match(rgx)
-
-  if (partials === null) return
-
-  const newDate =
-    partials.groups &&
-    (time
-      ? new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-          partials.groups['ampm']
-            ? partials.groups['ampm'] === 'PM'
-              ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour'])
-            : Number(partials.groups['hour']),
-          Number(partials.groups['minute']),
-          Number(partials.groups['second']),
-        )
-      : new Date(
-          Number(partials.groups['year']),
-          Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
-        ))
-
-  return newDate
+  return date
 }
 
 export const getMonthName = (month: number, locale: string) => {
@@ -123,6 +146,7 @@ const getMonthDays = (year: number, month: number) => {
       month: 'current',
     })
   }
+
   return dates
 }
 
@@ -140,22 +164,37 @@ const getTrailingDays = (
       month: 'next',
     })
   }
+
   return dates
 }
 
+export const getWeekNumber = (date: Date) => {
+  const week1 = new Date(date.getFullYear(), 0, 4)
+  return (
+    1 +
+    Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + ((week1.getDay() + 6) % 7)) / 7)
+  )
+}
+
 export const getMonthDetails = (year: number, month: number, firstDayOfWeek: number) => {
   const daysPrevMonth = getLeadingDays(year, month, firstDayOfWeek)
   const daysThisMonth = getMonthDays(year, month)
   const daysNextMonth = getTrailingDays(year, month, daysPrevMonth, daysThisMonth)
   const days = [...daysPrevMonth, ...daysThisMonth, ...daysNextMonth]
-
-  const weeks: { date: Date; month: string }[][] = []
+  const weeks: { weekNumber?: number; days: { date: Date; month: string }[] }[] = []
 
   days.forEach((day, index) => {
     if (index % 7 === 0 || weeks.length === 0) {
-      weeks.push([])
+      weeks.push({
+        days: [],
+      })
     }
-    weeks[weeks.length - 1].push(day)
+
+    if ((index + 1) % 7 === 0) {
+      weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date)
+    }
+
+    weeks[weeks.length - 1].days.push(day)
   })
 
   return weeks
@@ -193,18 +232,16 @@ export const isDateDisabled = (
   let disabled
   if (dates) {
     dates.forEach((_date: Date | Date[]) => {
-      if (Array.isArray(_date)) {
-        if (isDateInRange(date, _date[0], _date[1])) {
-          disabled = true
-        }
+      if (Array.isArray(_date) && isDateInRange(date, _date[0], _date[1])) {
+        disabled = true
       }
-      if (_date instanceof Date) {
-        if (isSameDateAs(date, _date)) {
-          disabled = true
-        }
+
+      if (_date instanceof Date && isSameDateAs(date, _date)) {
+        disabled = true
       }
     })
   }
+
   if (min && date < min) {
     disabled = true
   }
@@ -212,6 +249,7 @@ export const isDateDisabled = (
   if (max && date > max) {
     disabled = true
   }
+
   return disabled
 }
 

package/src/components/carousel/CCarousel.ts

@@ -185,11 +185,8 @@ const CCarousel = defineComponent({
       h(
         'div',
         {
-          class: [
-            'carousel slide',
-            props.transition === 'crossfade' && 'carousel-fade',
-            props.dark && 'carousel-dark',
-          ],
+          class: ['carousel slide', props.transition === 'crossfade' && 'carousel-fade'],
+          ...(props.dark && { 'data-coreui-theme': 'dark' }),
           onmouseover: () => props.pause && pause(),
           onmouseleave: () => cycle(),
           ref: carouselRef,

package/src/components/close-button/CCloseButton.ts

@@ -3,6 +3,10 @@ import { defineComponent, h } from 'vue'
 export const CCloseButton = defineComponent({
   name: 'CCloseButton',
   props: {
+    /**
+     * Invert the default color.
+     */
+    dark: Boolean,
     /**
      * Toggle the disabled state for the component.
      */
@@ -39,6 +43,7 @@ export const CCloseButton = defineComponent({
         ],
         'aria-label': 'Close',
         disabled: props.disabled,
+        ...(props.dark && { 'data-coreui-theme': 'dark' }),
         onClick: handleClick,
       })
   },

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

@@ -180,6 +180,27 @@ const CDatePicker = defineComponent({
      * Toggle the readonly state for the component.
      */
     inputReadOnly: Boolean,
+    /**
+     * Custom function to format the selected date into a string according to a custom format.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateFormat: Function,
+    /**
+     * Custom function to parse the input value into a valid Date object.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputDateParse: Function,
+    /**
+     * Defines the delay (in milliseconds) for the input field's onChange event.
+     *
+     * @since v5.0.0-alpha.4
+     */
+    inputOnChangeDelay: {
+      type: Number,
+      default: 750,
+    },
     /**
      * Sets the default locale for components. If not set, it is inherited from the navigator.language.
      */
@@ -225,6 +246,16 @@ const CDatePicker = defineComponent({
      * @since 4.9.0
      */
     selectAdjacementDays: Boolean,
+    /**
+     * Specify the type of date selection as day, week, month, or year.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    selectionType: {
+      type: String as PropType<'day' | 'week' | 'month' | 'year'>,
+      default: 'day',
+      validator: (value: string) => ['day', 'week', 'month', 'year'].includes(value),
+    },
     /**
      * Set whether to display dates in adjacent months (non-selectable) at the start and end of the current month.
      *
@@ -234,6 +265,12 @@ const CDatePicker = defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * Set whether to display week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    showWeekNumber: Boolean,
     /**
      * Size the component small or large.
      *
@@ -271,6 +308,12 @@ const CDatePicker = defineComponent({
         return false
       },
     },
+    /**
+     * Label displayed over week numbers in the calendar.
+     *
+     * @since 5.0.0-alpha.1
+     */
+    weekNumbersLabel: String,
   },
   emits: [
     /**