@coreui/vue-pro 5.2.0 → 5.4.0

package/src/components/calendar/CCalendar.ts

@@ -21,6 +21,42 @@ import {
 const CCalendar = defineComponent({
   name: 'CCalendar',
   props: {
+    /**
+     * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextMonthLabel: {
+      type: String,
+      default: 'Next month',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextYearLabel: {
+      type: String,
+      default: 'Next year',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevMonthLabel: {
+      type: String,
+      default: 'Previous month',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevYearLabel: {
+      type: String,
+      default: 'Previous year',
+    },
     /**
      * Default date of the component
      */
@@ -599,7 +635,10 @@ const CCalendar = defineComponent({
               weekDays.map(({ date }: { date: Date }) => {
                 return h(
                   'th',
-                  { class: 'calendar-cell' },
+                  {
+                    class: 'calendar-cell',
+                    abbr: date.toLocaleDateString(props.locale, { weekday: 'long' }),
+                  },
                   h(
                     'div',
                     {
@@ -634,6 +673,7 @@ const CCalendar = defineComponent({
                 maxDate.value,
                 props.disabledDates,
               )
+              const isSelected = isDateSelected(date, startDate.value, endDate.value)
               const current = week.days.some((day) => day.month === 'current')
               return h(
                 'tr',
@@ -649,10 +689,11 @@ const CCalendar = defineComponent({
                         props.selectionType === 'week' && hoverDate.value && selectEndDate.value
                           ? isDateInRange(date, startDate.value, hoverDate.value)
                           : isDateInRange(date, hoverDate.value, endDate.value),
-                      selected: isDateSelected(date, startDate.value, endDate.value),
+                      selected: isSelected,
                     },
                   ],
                   tabindex: props.selectionType === 'week' && current && !isDisabled ? 0 : -1,
+                  ...(isSelected && { 'aria-selected': true }),
                   ...(props.selectionType === 'week' &&
                     !isDisabled && {
                       onBlur: () => handleCalendarMouseLeave(),
@@ -677,6 +718,7 @@ const CCalendar = defineComponent({
                       maxDate.value,
                       props.disabledDates,
                     )
+                    const isSelected = isDateSelected(date, startDate.value, endDate.value)
                     return month === 'current' || props.showAdjacementDays
                       ? h(
                           'td',
@@ -695,7 +737,7 @@ const CCalendar = defineComponent({
                                   range:
                                     month === 'current' &&
                                     isDateInRange(date, startDate.value, endDate.value),
-                                  selected: isDateSelected(date, startDate.value, endDate.value),
+                                  selected: isSelected,
                                 }),
                                 [month]: true,
                                 today: month === 'current' && isToday(date),
@@ -708,6 +750,7 @@ const CCalendar = defineComponent({
                                 ? 0
                                 : -1,
                             title: date.toLocaleDateString(props.locale),
+                            ...(isSelected && { 'aria-selected': true }),
                             ...(props.selectionType === 'day' &&
                               (month === 'current' || props.selectAdjacementDays) && {
                                 onBlur: () => handleCalendarMouseLeave(),
@@ -754,6 +797,7 @@ const CCalendar = defineComponent({
                     maxDate.value,
                     props.disabledDates,
                   )
+                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -761,7 +805,7 @@ const CCalendar = defineComponent({
                         'calendar-cell',
                         {
                           disabled: isDisabled,
-                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          selected: isSelected,
                           'range-hover':
                             props.selectionType === 'month' &&
                             (hoverDate.value && selectEndDate
@@ -771,6 +815,7 @@ const CCalendar = defineComponent({
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
+                      ...(isSelected && { 'aria-selected': true }),
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
                         onClick: () => handleCalendarClick(date),
@@ -798,6 +843,7 @@ const CCalendar = defineComponent({
                     maxDate.value,
                     props.disabledDates,
                   )
+                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -805,7 +851,7 @@ const CCalendar = defineComponent({
                         'calendar-cell year',
                         {
                           disabled: isDisabled,
-                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          selected: isSelected,
                           'range-hover':
                             props.selectionType === 'year' &&
                             (hoverDate.value && selectEndDate
@@ -815,6 +861,7 @@ const CCalendar = defineComponent({
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
+                      ...(isSelected && { 'aria-selected': true }),
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
                         onClick: () => handleCalendarClick(date),
@@ -847,6 +894,7 @@ const CCalendar = defineComponent({
                 {
                   color: 'transparent',
                   size: 'sm',
+                  'aria-label': props.ariaNavPrevYearLabel,
                   onClick: () => handleNavigationOnClick('prev', true),
                 },
                 {
@@ -865,6 +913,7 @@ const CCalendar = defineComponent({
                   {
                     color: 'transparent',
                     size: 'sm',
+                    'aria-label': props.ariaNavPrevMonthLabel,
                     onClick: () => handleNavigationOnClick('prev'),
                   },
                   {
@@ -883,6 +932,7 @@ const CCalendar = defineComponent({
           'div',
           {
             class: 'calendar-nav-date',
+            'aria-live': 'polite',
             ...(props.navYearFirst && { style: { display: 'flex', justifyContent: 'center' } }),
           },
           [
@@ -925,6 +975,7 @@ const CCalendar = defineComponent({
                   {
                     color: 'transparent',
                     size: 'sm',
+                    'aria-label': props.ariaNavNextMonthLabel,
                     onClick: () => handleNavigationOnClick('next'),
                   },
                   {
@@ -942,6 +993,7 @@ const CCalendar = defineComponent({
                 {
                   color: 'transparent',
                   size: 'sm',
+                  'aria-label': props.ariaNavNextYearLabel,
                   onClick: () => handleNavigationOnClick('next', true),
                 },
                 {

package/src/components/calendar/utils.ts

@@ -19,10 +19,7 @@ export const convertToDateObject = (
     return convertIsoWeekToDate(date as string)
   }
 
-  const _date = new Date(Date.parse(date))
-  const userTimezoneOffset = _date.getTimezoneOffset() * 60_000
-
-  return new Date(_date.getTime() + userTimezoneOffset)
+  return new Date(Date.parse(date))
 }
 
 export const convertToLocalDate = (d: Date, locale: string, options = {}) =>

package/src/components/conditional-teleport/CConditionalTeleport.ts

@@ -16,7 +16,7 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

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

@@ -7,6 +7,42 @@ import { Color } from '../props'
 const CDatePicker = defineComponent({
   name: 'CDatePicker',
   props: {
+    /**
+     * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextMonthLabel: {
+      type: String,
+      default: 'Next month',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextYearLabel: {
+      type: String,
+      default: 'Next year',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevMonthLabel: {
+      type: String,
+      default: 'Previous month',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevYearLabel: {
+      type: String,
+      default: 'Previous year',
+    },
     /**
      * Default date of the component
      */
@@ -165,8 +201,8 @@ const CDatePicker = defineComponent({
     /**
      * The id global attribute defines an identifier (ID) that must be unique in the whole document.
      *
-     * The name attribute for the input element is generated based on the `id` property:
-     * - {id}-date
+     * **[Deprecated since v5.3.0]** The name attributes for input element is generated based on this property until you define name prop ex.:
+     * - \{id\}-date
      */
     id: String,
     /**
@@ -183,19 +219,19 @@ const CDatePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -220,6 +256,12 @@ const CDatePicker = defineComponent({
     minDate: {
       type: [Date, String],
     },
+    /**
+     * The name attribute for the input element.
+     *
+     * @since 5.3.0
+     */
+    name: String,
     /**
      * Show arrows navigation.
      */

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

@@ -6,7 +6,7 @@ import { CFormControlWrapper } from './../form/CFormControlWrapper'
 import { CPicker } from '../picker'
 import { CTimePicker } from '../time-picker'
 
-import { getLocalDateFromString } from './utils'
+import { getInputIdOrName, getLocalDateFromString } from './utils'
 
 import { useDebouncedCallback } from '../../composables'
 import { Color } from '../props'
@@ -14,6 +14,42 @@ import { Color } from '../props'
 const CDateRangePicker = defineComponent({
   name: 'CDateRangePicker',
   props: {
+    /**
+     * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextMonthLabel: {
+      type: String,
+      default: 'Next month',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextYearLabel: {
+      type: String,
+      default: 'Next year',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevMonthLabel: {
+      type: String,
+      default: 'Previous month',
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevYearLabel: {
+      type: String,
+      default: 'Previous year',
+    },
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -197,13 +233,15 @@ const CDateRangePicker = defineComponent({
      */
     footer: Boolean,
     /**
-     * The id global attribute defines an identifier (ID) that must be unique in the whole document.
+     * The id attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the IDs unique. Alternatively, you can use an array of two strings for start and end dates separately.
      *
-     * The name attributes for input elements are generated based on the `id` property:
-     * - {id}-start-date
-     * - {id}-end-date
+     * **[Deprecated since v5.3.0]** If the property is a type of string, the name attributes for input elements are generated based on this property until you define name prop ex.:
+     * - \{id\}-start-date
+     * - \{id\}-end-date
      */
-    id: String,
+    id: {
+      type: [String, Array] as PropType<string | [string, string]>,
+    },
     /**
      * Toggle visibility or set the content of the input indicator.
      */
@@ -214,19 +252,19 @@ const CDateRangePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -266,6 +304,20 @@ const CDateRangePicker = defineComponent({
      * Min selectable date.
      */
     minDate: [Date, String],
+    /**
+     * The name attribute for the input elements. It can be a single string for both the start and end dates. If a single string is used, the postfix "-start-date" and "-end-date" will be automatically added to make the names unique. Alternatively, you can use an array of two strings for start and end dates separately.
+     *
+     * Example for single string: 'date-input'
+     * Result: 'date-input-start-date', 'date-input-end-date'
+     *
+     * Example for array: ['start-date-input', 'end-date-input']
+     * Result: 'start-date-input', 'end-date-input'
+     *
+     * @since 5.3.0
+     */
+    name: {
+      type: [String, Array] as PropType<string | [string, string]>,
+    },
     /**
      * Show arrows navigation.
      */
@@ -283,7 +335,7 @@ const CDateRangePicker = defineComponent({
      * Specifies a short hint that is visible in the input.
      */
     placeholder: {
-      type: [String, Array] as PropType<string | string[]>,
+      type: [String, Array] as PropType<string | [string, string]>,
       default: () => ['Start date', 'End date'],
     },
     /**
@@ -584,8 +636,8 @@ const CDateRangePicker = defineComponent({
       return props.inputDateFormat
         ? props.inputDateFormat(_date)
         : props.timepicker
-        ? _date.toLocaleString(props.locale)
-        : _date.toLocaleDateString(props.locale)
+          ? _date.toLocaleString(props.locale)
+          : _date.toLocaleDateString(props.locale)
     }
 
     const setInputValue = (date: Date | string | null) => {
@@ -698,7 +750,12 @@ const CDateRangePicker = defineComponent({
               },
             ],
             disabled: props.disabled,
-            ...(props.id && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }),
+            ...(props.id && { id: getInputIdOrName(props.id, props.range, 'start') }),
+            ...(props.name && { name: getInputIdOrName(props.name, props.range, 'start') }),
+            ...(props.id &&
+              !Array.isArray(props.id) &&
+              !props.name && { name: props.range ? `${props.id}-start-date` : `${props.id}-date` }), // TODO: remove in v6
+
             onClick: () => {
               selectEndDate.value = false
             },
@@ -730,7 +787,11 @@ const CDateRangePicker = defineComponent({
                 },
               ],
               disabled: props.disabled,
-              ...(props.id && { name: `${props.id}-end-date` }),
+              ...(props.id && { id: getInputIdOrName(props.id, props.range, 'end') }),
+              ...(props.name && { name: getInputIdOrName(props.name, props.range, 'end') }),
+              ...(props.id &&
+                !Array.isArray(props.id) &&
+                !props.name && { name: `${props.id}-end-date` }), // TODO: remove in v6
               onClick: () => {
                 selectEndDate.value = true
               },
@@ -767,7 +828,7 @@ const CDateRangePicker = defineComponent({
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
-          id: props.id,
+          ...(props.id && !Array.isArray(props.id) && { id: props.id }),
           invalid: isValid.value === false ? true : false,
           label: props.label,
           text: props.text,
@@ -791,7 +852,6 @@ const CDateRangePicker = defineComponent({
                 disabled: props.disabled,
                 dropdownClassNames: 'date-picker-dropdown',
                 footer: props.footer || props.timepicker,
-                id: props.id,
                 onHide: () => {
                   visible.value = false
                   emit('hide')
@@ -828,7 +888,7 @@ const CDateRangePicker = defineComponent({
                             if (props.range) {
                               endDate.value = date
                             }
-                            
+
                             calendarDate.value = date
                           },
                         },
@@ -900,6 +960,10 @@ const CDateRangePicker = defineComponent({
                         h(
                           CCalendar,
                           {
+                            ariaNavNextMonthLabel: props.ariaNavNextMonthLabel,
+                            ariaNavNextYearLabel: props.ariaNavNextYearLabel,
+                            ariaNavPrevMonthLabel: props.ariaNavPrevMonthLabel,
+                            ariaNavPrevYearLabel: props.ariaNavPrevYearLabel,
                             calendarDate: calendarDate.value,
                             calendars: isMobile.value ? 1 : props.calendars,
                             class: 'date-picker-calendars',
@@ -995,8 +1059,8 @@ const CDateRangePicker = defineComponent({
                                         ? true
                                         : false
                                       : endDate.value === null
-                                      ? true
-                                      : false,
+                                        ? true
+                                        : false,
                                   locale: props.locale,
                                   onChange: (_: any, __: any, date: Date) =>
                                     index === 0

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

@@ -1,3 +1,19 @@
+export const getInputIdOrName = (
+  attribute: string | [string, string],
+  range: boolean,
+  position?: 'start' | 'end',
+): string => {
+  if (range && !Array.isArray(attribute)) {
+    return `${attribute}-${position}-date`
+  }
+
+  if (Array.isArray(attribute)) {
+    return position === 'start' ? attribute[0] : attribute[1]
+  }
+
+  return attribute
+}
+
 export const getLocalDateFromString = (string: string, locale: string, time?: boolean) => {
   if (!Number.isNaN(Date.parse(string))) {
     return new Date(Date.parse(string))

package/src/components/dropdown/CDropdown.ts

@@ -62,7 +62,7 @@ const CDropdown = defineComponent({
     /**
      * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -115,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     teleport: {
       type: Boolean,

package/src/components/dropdown/CDropdownToggle.ts

@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     navLink: {
       type: Boolean,

package/src/components/footer/CFooter.ts

@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CFooter = defineComponent({
   name: 'CFooter',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
     /**
      * Place footer in non-static positions.
      *
@@ -18,7 +25,7 @@ const CFooter = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.as,
         { class: ['footer', { [`footer-${props.position}`]: props.position }] },
         slots.default && slots.default(),
       )

package/src/components/footer/__tests__/CFooter.spec.ts

@@ -19,6 +19,15 @@ const customWrapper = mount(Component, {
   },
 })
 
+const customWrapperTwo = mount(Component, {
+  propsData: {
+    as: 'footer',
+  },
+  slots: {
+    default: 'Default slot',
+  },
+})
+
 describe(`Loads and display ${ComponentName} component`, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
@@ -42,3 +51,13 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.classes('footer-fixed')).toBe(true)
   })
 })
+
+describe(`Customize (number two) ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapperTwo.html()).toMatchSnapshot()
+  })
+
+  it('tag name is custom', () => {
+    expect(customWrapperTwo.element.tagName).toBe('FOOTER')
+  })
+})

package/src/components/header/CHeader.ts

@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CHeader = defineComponent({
   name: 'CHeader',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
     /**
      * Defines optional container wrapping children elements.
      *
@@ -31,7 +38,7 @@ const CHeader = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.as,
         { class: ['header', { [`header-${props.position}`]: props.position }] },
         props.container
           ? h(

package/src/components/header/__tests__/CHeader.spec.ts

@@ -20,6 +20,15 @@ const customWrapper = mount(Component, {
   },
 })
 
+const customWrapperTwo = mount(Component, {
+  propsData: {
+    as: 'header',
+  },
+  slots: {
+    default: 'Default slot',
+  },
+})
+
 describe(`Loads and display ${ComponentName} component`, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
@@ -44,3 +53,13 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.find('.container-lg').classes('container-lg')).toBe(true)
   })
 })
+
+
+describe(`Customize (number two) ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapperTwo.html()).toMatchSnapshot()
+  })
+  it('tag name is custom', () => {
+    expect(customWrapperTwo.element.tagName).toBe('HEADER')
+  })
+})