@coreui/vue-pro 5.11.0 → 5.13.0

package/src/components/calendar/utils.ts

@@ -87,7 +87,8 @@ export const getDateBySelectionType = (
   }
 
   if (selectionType === 'week') {
-    return `${date.getFullYear()}W${getWeekNumber(date)}`
+    const { year, weekNumber } = getISOWeekNumberAndYear(date)
+    return `${year}W${weekNumber.toString().padStart(2, '0')}`
   }
 
   if (selectionType === 'month') {
@@ -254,12 +255,20 @@ const getTrailingDays = (
 }
 
 /**
- * Calculates the ISO week number for a given date.
- * @param date - The date to calculate the week number for.
- * @returns The ISO week number.
+ * Calculates the ISO 8601 week number and year for a given date.
+ *
+ * In the ISO 8601 standard:
+ * - Weeks start on Monday.
+ * - The first week of the year is the one that contains January 4th.
+ * - The year of the week may differ from the calendar year (e.g., Dec 29, 2025 is in ISO year 2026).
+ *
+ * @param {Date} date - The date for which to calculate the ISO week number and year.
+ * @returns {{ weekNumber: number, year: number }} An object containing:
+ *   - `weekNumber`: the ISO week number (1–53),
+ *   - `year`: the ISO year (may differ from the calendar year of the date).
  */
-export const getWeekNumber = (date: Date): number => {
-  const tempDate = new Date(date.getTime())
+export const getISOWeekNumberAndYear = (date: Date): { weekNumber: number; year: number } => {
+  const tempDate = new Date(date)
   tempDate.setHours(0, 0, 0, 0)
 
   // Thursday in current week decides the year
@@ -270,7 +279,7 @@ export const getWeekNumber = (date: Date): number => {
   // Calculate full weeks to the date
   const weekNumber = 1 + Math.round((tempDate.getTime() - week1.getTime()) / 86_400_000 / 7)
 
-  return weekNumber
+  return { weekNumber, year: tempDate.getFullYear() }
 }
 
 /**
@@ -284,22 +293,27 @@ export const getMonthDetails = (
   year: number,
   month: number,
   firstDayOfWeek: number
-): { weekNumber?: number; days: { date: Date; month: string }[] }[] => {
+): { week: { number: number; year: number }; days: { date: Date; month: string }[] }[] => {
   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: { weekNumber?: number; days: { date: Date; month: string }[] }[] = []
+  const weeks: {
+    week: { number: number; year: number }
+    days: { date: Date; month: string }[]
+  }[] = []
 
   days.forEach((day, index) => {
     if (index % 7 === 0 || weeks.length === 0) {
       weeks.push({
+        week: { number: 0, year: 0 },
         days: [],
       })
     }
 
     if ((index + 1) % 7 === 0) {
-      weeks[weeks.length - 1].weekNumber = getWeekNumber(day.date)
+      const { weekNumber, year } = getISOWeekNumberAndYear(day.date)
+      weeks[weeks.length - 1].week = { number: weekNumber, year }
     }
 
     weeks[weeks.length - 1].days.push(day)
@@ -646,7 +660,11 @@ export const removeTimeFromDate = (date: Date): Date => {
  * @param {Date | null} source - The date to copy the time from.
  * @returns {Date} A new Date instance with the date from `target` and time from `source`.
  */
-export const setTimeFromDate = (target: Date, source: Date | null): Date => {
+export const setTimeFromDate = (target: Date | null, source: Date | null): Date | null => {
+  if (target === null) {
+    return null
+  }
+
   if (!(source instanceof Date)) {
     return target
   }

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

@@ -576,7 +576,7 @@ const CDateRangePicker = defineComponent({
     const inputStartHoverValue = ref<Date | string | null>(null)
     const inputEndHoverValue = ref<Date | string | null>(null)
     const isValid = ref<boolean | undefined>(
-      props.valid ?? (props.invalid === true ? false : undefined),
+      props.valid ?? (props.invalid === true ? false : undefined)
     )
     const isMobile = ref(false)
     const selectEndDate = ref(false)
@@ -589,7 +589,7 @@ const CDateRangePicker = defineComponent({
       () => [props.valid, props.invalid],
       () => {
         isValid.value = props.valid ?? (props.invalid === true ? false : undefined)
-      },
+      }
     )
 
     watch(
@@ -597,7 +597,7 @@ const CDateRangePicker = defineComponent({
       () => {
         calendarDate.value = props.startDate ? props.startDate : null
         startDate.value = props.startDate ? props.startDate : null
-      },
+      }
     )
 
     watch(
@@ -605,21 +605,21 @@ const CDateRangePicker = defineComponent({
       () => {
         calendarDate.value = props.endDate ? props.endDate : null
         endDate.value = props.endDate ? props.endDate : null
-      },
+      }
     )
 
     watch(
       () => props.maxDate,
       () => {
         maxDate.value = props.maxDate ? props.maxDate : null
-      },
+      }
     )
 
     watch(
       () => props.minDate,
       () => {
         minDate.value = props.minDate ? props.minDate : null
-      },
+      }
     )
 
     watch(inputStartRef, () => {
@@ -641,7 +641,7 @@ const CDateRangePicker = defineComponent({
     const formatDate = (date: Date | string) => {
       if (props.inputDateFormat) {
         return props.inputDateFormat(
-          date instanceof Date ? new Date(date) : convertToDateObject(date, props.selectionType),
+          date instanceof Date ? new Date(date) : convertToDateObject(date, props.selectionType)
         )
       }
 
@@ -742,11 +742,16 @@ const CDateRangePicker = defineComponent({
         : getLocalDateFromString(value, props.locale, props.timepicker)
       if (date instanceof Date && date.getTime()) {
         calendarDate.value = date
-        if (input === 'start') {
-          startDate.value = date
-        } else {
-          endDate.value = date
-        }
+      }
+
+      if (input === 'start') {
+        startDate.value = date ?? null
+        emit('start-date-change', date ?? null)
+        emit('update:start-date', date ?? null)
+      } else {
+        endDate.value = date ?? null
+        emit('end-date-change', date ?? null)
+        emit('update:end-date', date ?? null)
       }
     }
 
@@ -779,7 +784,7 @@ const CDateRangePicker = defineComponent({
             onInput: (event: Event) =>
               useDebouncedCallback(
                 () => handleOnChange((event.target as HTMLInputElement).value, 'start'),
-                props.inputOnChangeDelay,
+                props.inputOnChangeDelay
               ),
             placeholder: Array.isArray(props.placeholder)
               ? props.placeholder[0]
@@ -815,7 +820,7 @@ const CDateRangePicker = defineComponent({
               onInput: (event: Event) =>
                 useDebouncedCallback(
                   () => handleOnChange((event.target as HTMLInputElement).value, 'end'),
-                  props.inputOnChangeDelay,
+                  props.inputOnChangeDelay
                 ),
               placeholder: props.placeholder[1],
               readonly: props.inputReadOnly || typeof props.format === 'string',
@@ -847,7 +852,7 @@ const CDateRangePicker = defineComponent({
               class: 'date-picker-cleaner',
               onClick: (event: Event) => handleClear(event),
             }),
-        ],
+        ]
       )
 
     return () =>
@@ -925,7 +930,7 @@ const CDateRangePicker = defineComponent({
                             calendarDate.value = date
                           },
                         },
-                        () => props.todayButton,
+                        () => props.todayButton
                       ),
                     props.cancelButton &&
                       h(
@@ -943,7 +948,7 @@ const CDateRangePicker = defineComponent({
                           size: props.cancelButtonSize,
                           variant: props.cancelButtonVariant,
                         },
-                        () => props.cancelButton,
+                        () => props.cancelButton
                       ),
                     props.confirmButton &&
                       h(
@@ -956,7 +961,7 @@ const CDateRangePicker = defineComponent({
                           size: props.confirmButtonSize,
                           variant: props.confirmButtonVariant,
                         },
-                        () => props.confirmButton,
+                        () => props.confirmButton
                       ),
                   ]),
                 default: () =>
@@ -983,9 +988,9 @@ const CDateRangePicker = defineComponent({
                                 },
                                 variant: 'ghost',
                               },
-                              () => key,
-                            ),
-                          ),
+                              () => key
+                            )
+                          )
                         ),
                       h(
                         'div',
@@ -1055,8 +1060,8 @@ const CDateRangePicker = defineComponent({
                               navPrevDoubleIcon: () =>
                                 slots.navPrevDoubleIcon && slots.navPrevDoubleIcon(),
                             }),
-                          },
-                        ),
+                          }
+                        )
                       ),
                       props.timepicker &&
                         h(
@@ -1105,14 +1110,14 @@ const CDateRangePicker = defineComponent({
                                       ? startDate.value && new Date(startDate.value)
                                       : endDate.value && new Date(endDate.value),
                                   variant: 'select',
-                                }),
-                              ),
+                                })
+                              )
                         ),
-                    ],
+                    ]
                   ),
-              },
+              }
             ),
-        },
+        }
       )
   },
 })

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

@@ -1,7 +1,15 @@
+/**
+ * Generates input IDs or names based on the provided attributes, range, and position.
+ *
+ * @param attribute - A single string or a tuple of two strings representing the attribute names.
+ * @param range - A boolean indicating whether the input is part of a range.
+ * @param position - Optional. Specifies the position ('start' or 'end') when `range` is true.
+ * @returns A string representing the input ID or name.
+ */
 export const getInputIdOrName = (
   attribute: string | [string, string],
   range: boolean,
-  position?: 'start' | 'end',
+  position?: 'start' | 'end'
 ): string => {
   if (range && !Array.isArray(attribute)) {
     return `${attribute}-${position}-date`
@@ -14,11 +22,19 @@ export const getInputIdOrName = (
   return attribute
 }
 
-export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
-  if (!Number.isNaN(Date.parse(string))) {
-    return new Date(Date.parse(string))
-  }
-
+/**
+ * Parses a date string into a Date object based on the provided locale and time inclusion.
+ *
+ * @param dateString - The date string to parse.
+ * @param locale - The locale to use for parsing the date string.
+ * @param includeTime - Optional. Determines whether to include time in the parsed Date object.
+ * @returns A Date object representing the parsed date and time, or `undefined` if parsing fails.
+ */
+export const getLocalDateFromString = (
+  string: string,
+  locale: string,
+  time?: boolean
+): Date | undefined => {
   const date = new Date(2013, 11, 31, 17, 19, 22)
   let regex = time ? date.toLocaleString(locale) : date.toLocaleDateString(locale)
   regex = regex
@@ -48,17 +64,17 @@ export const getLocalDateFromString = (string: string, locale: string, time?: bo
           Number(partials.groups['month']) - 1,
           Number(partials.groups['day']),
           partials.groups['ampm']
-            ? (partials.groups['ampm'] === 'PM'
+            ? partials.groups['ampm'] === 'PM'
               ? Number(partials.groups['hour']) + 12
-              : Number(partials.groups['hour']))
+              : Number(partials.groups['hour'])
             : Number(partials.groups['hour']),
           Number(partials.groups['minute']),
-          Number(partials.groups['second']),
+          Number(partials.groups['second'])
         )
       : new Date(
           Number(partials.groups['year']),
           Number(partials.groups['month']) - 1,
-          Number(partials.groups['day']),
+          Number(partials.groups['day'])
         ))
 
   return newDate

package/src/components/index.ts

@@ -1,5 +1,6 @@
 export * from './accordion'
 export * from './alert'
+export * from './autocomplete'
 export * from './avatar'
 export * from './backdrop'
 export * from './badge'

package/src/components/multi-select/CMultiSelect.ts

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, PropType, provide, ref, watch } from 'vue'
+import { computed, defineComponent, h, PropType, provide, ref, useId, watch } from 'vue'
 
 import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CConditionalTeleport } from '../conditional-teleport'
@@ -33,12 +33,21 @@ const CMultiSelect = defineComponent({
     /**
      * A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button.
      *
-     * @since 5.7.0
+     * @since 5.13.0
      */
     ariaCleanerLabel: {
       type: String,
       default: 'Clear all selections',
     },
+    /**
+     * A string that provides an accessible label for the indicator button. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.7.0
+     */
+    ariaIndicatorLabel: {
+      type: String,
+      default: 'Toggle dropdown',
+    },
     /**
      * Enables selection cleaner element.
      *
@@ -353,6 +362,7 @@ const CMultiSelect = defineComponent({
     const searchValue = ref('')
     const selected = ref<SelectedOption[]>([])
     const userOptions = ref<Option[]>([])
+    const uniqueId = useId()
 
     const {
       dropdownMenuElement,
@@ -626,17 +636,6 @@ const CMultiSelect = defineComponent({
     }
 
     return () => [
-      h(CMultiSelectNativeSelect, {
-        id: props.id,
-        multiple: props.multiple,
-        name: props.name,
-        options: selected.value,
-        required: props.required,
-        value: props.multiple
-          ? selected.value.map((option: SelectedOption) => option.value.toString())
-          : selected.value.map((option: SelectedOption) => option.value)[0],
-        onChange: () => emit('change', selected.value),
-      }),
       h(
         CFormControlWrapper,
         {
@@ -646,7 +645,7 @@ const CMultiSelect = defineComponent({
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
-          id: props.id,
+          id: props.id ?? uniqueId,
           invalid: props.invalid,
           label: props.label,
           text: props.text,
@@ -654,7 +653,18 @@ const CMultiSelect = defineComponent({
           valid: props.valid,
         },
         {
-          default: () =>
+          default: () => [
+            h(CMultiSelectNativeSelect, {
+              id: props.id ?? uniqueId,
+              multiple: props.multiple,
+              name: props.name ?? uniqueId,
+              options: selected.value,
+              required: props.required,
+              value: props.multiple
+                ? selected.value.map((option: SelectedOption) => option.value.toString())
+                : selected.value.map((option: SelectedOption) => option.value)[0],
+              onChange: () => emit('change', selected.value),
+            }),
             h(
               'div',
               {
@@ -669,7 +679,10 @@ const CMultiSelect = defineComponent({
                   },
                 ],
                 onKeydown: handleGlobalSearch,
+                role: 'combobox',
+                'aria-haspopup': 'listbox',
                 'aria-expanded': isOpen.value,
+                ...(props.teleport && { 'aria-owns': `multi-select-listbox-${uniqueId}` }),
                 ref: multiSelectRef,
               },
               {
@@ -709,6 +722,8 @@ const CMultiSelect = defineComponent({
                                     type: 'text',
                                     class: 'form-multi-select-search',
                                     disabled: props.disabled,
+                                    id: `search-${props.id ?? uniqueId}`,
+                                    name: `search-${props.name ?? uniqueId}`,
                                     autocomplete: 'off',
                                     onInput: (event: InputEvent) => handleSearchChange(event),
                                     onKeydown: (event: KeyboardEvent) => handleSearchKeyDown(event),
@@ -769,6 +784,7 @@ const CMultiSelect = defineComponent({
                                   }
                                 },
                                 type: 'button',
+                                'aria-label': props.ariaIndicatorLabel,
                                 ...(props.disabled && { tabIndex: -1 }),
                               }),
                             ],
@@ -794,8 +810,11 @@ const CMultiSelect = defineComponent({
                                 show: props.teleport && isOpen.value,
                               },
                             ],
+                            id: `multi-select-listbox-${uniqueId}`,
                             onKeydown: handleGlobalSearch,
-                            role: 'menu',
+                            role: 'listbox',
+                            'aria-labelledby': props.id ?? uniqueId,
+                            'aria-multiselectable': props.multiple,
                             ref: dropdownMenuElement,
                           },
                           {
@@ -834,6 +853,7 @@ const CMultiSelect = defineComponent({
                 ],
               }
             ),
+          ],
         }
       ),
     ]

package/src/components/multi-select/CMultiSelectOptions.ts

@@ -3,7 +3,7 @@ import { defineComponent, h, PropType, VNode } from 'vue'
 import { CElementCover } from '../element-cover'
 import { CVirtualScroller } from '../virtual-scroller'
 
-import { getNextSibling, getPreviousSibling } from './utils'
+import { getNextSibling, getPreviousSibling } from '../../utils'
 import type { Option, OptionsGroup } from './types'
 
 const CMultiSelectOptions = defineComponent({
@@ -91,6 +91,10 @@ const CMultiSelectOptions = defineComponent({
                     onClick: () => handleOptionClick(option as Option),
                     onKeydown: (event: any) => handleKeyDown(event, option as Option),
                     tabindex: 0,
+                    role: 'option',
+                    'aria-selected': props.selected.some(
+                      (_option) => _option.value === option.value,
+                    ),
                   },
                   props.scopedSlots && props.scopedSlots['options']
                     ? h(props.scopedSlots['options'], { option: option })

package/src/components/multi-select/utils.ts

@@ -66,46 +66,12 @@ export const flattenOptionsArray = (
   return optionsList
 }
 
-export const getNextSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.nextElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.nextElementSibling
-  }
-
-  return
-}
-
 export const getOptionsList = (container: HTMLElement): HTMLElement[] => {
   return Array.from(
     container.querySelectorAll('.form-multi-select-option:not(.disabled):not(:disabled)'),
   )
 }
 
-export const getPreviousSibling = (elem: HTMLElement, selector?: string) => {
-  // Get the next sibling element
-  let sibling = elem.previousElementSibling
-
-  // If there's no selector, return the first sibling
-  if (!selector) return sibling
-
-  // If the sibling matches our selector, use it
-  // If not, jump to the next sibling and continue the loop
-  while (sibling) {
-    if (sibling.matches(selector)) return sibling
-    sibling = sibling.previousElementSibling
-  }
-
-  return
-}
-
 export const isExternalSearch = (search: Search): boolean => {
   return (
     (typeof search === 'string' && search === 'external') ||