@coreui/vue-pro 5.3.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
      */
@@ -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,

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

@@ -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.
      */
@@ -216,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,
@@ -924,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',

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/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')
+  })
+})

package/src/components/modal/CModal.ts

@@ -1,6 +1,7 @@
 import {
   defineComponent,
   h,
+  PropType,
   provide,
   ref,
   RendererElement,
@@ -11,6 +12,7 @@ import {
 } from 'vue'
 
 import { CBackdrop } from '../backdrop/CBackdrop'
+import { CConditionalTeleport } from '../conditional-teleport'
 
 import { executeAfterTransition } from '../../utils/transition'
 
@@ -47,6 +49,15 @@ const CModal = defineComponent({
         return false
       },
     },
+    /**
+     * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since 5.3.0
+     */
+    container: {
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
+      default: 'body',
+    },
     /**
      * A string of all className you want applied to the modal content component.
      */
@@ -54,7 +65,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     focus: {
       type: Boolean,
@@ -99,6 +110,15 @@ const CModal = defineComponent({
         return ['sm', 'lg', 'xl'].includes(value)
       },
     },
+    /**
+     * Generates modal using Teleport.
+     *
+     * @since 5.3.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false,
+    },
     /**
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
@@ -264,27 +284,37 @@ const CModal = defineComponent({
         ),
       )
 
-    return () => [
+    return () =>
       h(
-        Transition,
+        CConditionalTeleport,
         {
-          css: false,
-          onEnter: (el, done) => handleEnter(el, done),
-          onAfterEnter: () => handleAfterEnter(),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el),
+          container: props.container,
+          teleport: props.teleport,
         },
-        () =>
-          props.unmountOnClose
-            ? visible.value && modal()
-            : withDirectives(modal(), [[vShow, visible.value]]),
-      ),
-      props.backdrop &&
-        h(CBackdrop, {
-          class: 'modal-backdrop',
-          visible: visible.value,
-        }),
-    ]
+        {
+          default: () => [
+            h(
+              Transition,
+              {
+                css: false,
+                onEnter: (el, done) => handleEnter(el, done),
+                onAfterEnter: () => handleAfterEnter(),
+                onLeave: (el, done) => handleLeave(el, done),
+                onAfterLeave: (el) => handleAfterLeave(el),
+              },
+              () =>
+                props.unmountOnClose
+                  ? visible.value && modal()
+                  : withDirectives(modal(), [[vShow, visible.value]]),
+            ),
+            props.backdrop &&
+              h(CBackdrop, {
+                class: 'modal-backdrop',
+                visible: visible.value,
+              }),
+          ],
+        },
+      )
   },
 })
 

package/src/components/popover/CPopover.ts

@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * Appends the vue popover 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>,

package/src/components/time-picker/CTimePicker.ts

@@ -170,7 +170,7 @@ const CTimePicker = defineComponent({
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputOnChangeDelay: {
       type: Number,

package/src/components/tooltip/CTooltip.ts

@@ -23,7 +23,7 @@ const CTooltip = defineComponent({
     /**
      * Appends the vue tooltip 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>,