@coreui/vue-pro 5.0.0-beta.1 → 5.0.0-rc.1

package/src/components/button/CButton.ts

@@ -9,19 +9,19 @@ export const CButton = defineComponent({
      * Toggle the active state for the component.
      */
     active: Boolean,
-    /**
-     * Sets the color context of the component to one of CoreUI’s themed colors.
-     *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
-     */
-    color: Color,
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'button',
     },
+    /**
+     * Sets the color context of the component to one of CoreUI’s themed colors.
+     *
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
+     */
+    color: Color,
     /**
      * Toggle the disabled state for the component.
      */
@@ -79,7 +79,7 @@ export const CButton = defineComponent({
     'click',
   ],
   setup(props, { emit, slots }) {
-    const component = props.href ? 'a' : props.component
+    const component = props.href ? 'a' : props.as
     const handleClick = (event: Event) => {
       if (props.disabled) {
         return

package/src/components/button/__tests__/CButton.spec.ts

@@ -13,8 +13,8 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
+    as: 'div',
     color: 'warning',
-    component: 'div',
     disabled: true,
     href: '/bazinga',
     shape: 'rounded-pill',
@@ -28,8 +28,8 @@ const customWrapper = mount(Component, {
 
 const customWrapperTwo = mount(Component, {
   propsData: {
+    as: 'a',
     color: 'warning',
-    component: 'a',
     disabled: true,
   },
   slots: {

package/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (number two) CButton component renders correctly 1`] = `"<a class="btn btn-warning disabled" disabled="false" aria-disabled="true" tabindex="-1">Default slot</a>"`;
+exports[`Customize (number two) CButton component renders correctly 1`] = `"<a class="btn btn-warning disabled" aria-disabled="true" tabindex="-1">Default slot</a>"`;
 
-exports[`Customize CButton component renders correctly 1`] = `"<div class="btn btn-outline-warning btn-lg active disabled rounded-pill" disabled="true">Default slot</div>"`;
+exports[`Customize CButton component renders correctly 1`] = `"<a class="btn btn-outline-warning btn-lg active disabled rounded-pill" aria-disabled="true" tabindex="-1" href="/bazinga">Default slot</a>"`;
 
 exports[`Loads and display CButton component renders correctly 1`] = `"<button class="btn btn-undefined" type="button">Default slot</button>"`;

package/src/components/calendar/CCalendar.ts

@@ -124,7 +124,7 @@ const CCalendar = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -143,7 +143,7 @@ const CCalendar = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     showWeekNumber: Boolean,
     /**
@@ -174,7 +174,7 @@ const CCalendar = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     weekNumbersLabel: String,
   },
@@ -210,8 +210,8 @@ const CCalendar = defineComponent({
       props.calendarDate
         ? convertToDateObject(props.calendarDate, props.selectionType)
         : props.startDate
-        ? convertToDateObject(props.startDate, props.selectionType)
-        : new Date(),
+          ? convertToDateObject(props.startDate, props.selectionType)
+          : new Date(),
     )
     const startDate = ref<Date | null>(
       props.startDate ? convertToDateObject(props.startDate, props.selectionType) : null,
@@ -284,14 +284,18 @@ const CCalendar = defineComponent({
     watch(
       () => props.maxDate,
       () => {
-        maxDate.value = props.maxDate ? convertToDateObject(props.maxDate, props.selectionType) : null
+        maxDate.value = props.maxDate
+          ? convertToDateObject(props.maxDate, props.selectionType)
+          : null
       },
     )
 
     watch(
       () => props.minDate,
       () => {
-        minDate.value = props.minDate ? convertToDateObject(props.minDate, props.selectionType) : null
+        minDate.value = props.minDate
+          ? convertToDateObject(props.minDate, props.selectionType)
+          : null
       },
     )
 
@@ -428,7 +432,7 @@ const CCalendar = defineComponent({
         const list: HTMLElement[] = calendarRef.value
           ? Array.from(
               calendarRef.value.querySelectorAll(
-                props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td.current',
+                props.selectionType === 'week' ? 'tr[tabindex="0"]' : 'td[tabindex="0"]',
               ),
             )
           : []
@@ -449,14 +453,14 @@ const CCalendar = defineComponent({
             props.selectionType === 'week' && view.value === 'days'
               ? -1
               : view.value === 'days'
-              ? -7
-              : -3,
+                ? -7
+                : -3,
           ArrowDown:
             props.selectionType === 'week' && view.value === 'days'
               ? 1
               : view.value === 'days'
-              ? 7
-              : 3,
+                ? 7
+                : 3,
         }
 
         if (
@@ -478,23 +482,27 @@ const CCalendar = defineComponent({
           }
 
           setTimeout(() => {
-            const _list: HTMLElement[] = element.parentNode?.parentNode ? Array.from(
-              element.parentNode.parentNode.querySelectorAll('td[tabindex="0"], tr[tabindex="0"]'),
-            ) : []
+            const _list: HTMLElement[] = element.parentNode?.parentNode
+              ? Array.from(
+                  element.parentNode.parentNode.querySelectorAll(
+                    'td[tabindex="0"], tr[tabindex="0"]',
+                  ),
+                )
+              : []
 
-            if (_list.length && event.key === 'ArrowRight') {
+            if (_list.length > 0 && event.key === 'ArrowRight') {
               _list[0].focus()
             }
 
-            if (_list.length && event.key === 'ArrowLeft') {
+            if (_list.length > 0 && event.key === 'ArrowLeft') {
               _list[_list.length - 1].focus()
             }
 
-            if (_list.length && event.key === 'ArrowDown') {
+            if (_list.length > 0 && event.key === 'ArrowDown') {
               _list[gap['ArrowDown'] - (list.length - index)].focus()
             }
 
-            if (_list.length && event.key === 'ArrowUp') {
+            if (_list.length > 0 && event.key === 'ArrowUp') {
               _list[_list.length - (Math.abs(gap['ArrowUp']) + 1 - (index + 1))].focus()
             }
           }, 1)
@@ -600,12 +608,12 @@ const CCalendar = defineComponent({
                     typeof props.weekdayFormat === 'function'
                       ? props.weekdayFormat(date)
                       : typeof props.weekdayFormat === 'string'
-                      ? date.toLocaleDateString(props.locale, {
-                          weekday: <'long' | 'narrow' | 'short'>props.weekdayFormat,
-                        })
-                      : date
-                          .toLocaleDateString(props.locale, { weekday: 'long' })
-                          .slice(0, props.weekdayFormat),
+                        ? date.toLocaleDateString(props.locale, {
+                            weekday: <'long' | 'narrow' | 'short'>props.weekdayFormat,
+                          })
+                        : date
+                            .toLocaleDateString(props.locale, { weekday: 'long' })
+                            .slice(0, props.weekdayFormat),
                   ),
                 )
               }),
@@ -651,8 +659,8 @@ const CCalendar = defineComponent({
                       onClick: () => handleCalendarClick(date),
                       onFocus: () => handleCalendarMouseEnter(date),
                       onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
-                      onMouseEnter: () => handleCalendarMouseEnter(date),
-                      onMouseLeave: () => handleCalendarMouseLeave(),
+                      onMouseenter: () => handleCalendarMouseEnter(date),
+                      onMouseleave: () => handleCalendarMouseLeave(),
                     }),
                 },
                 [
@@ -663,7 +671,12 @@ const CCalendar = defineComponent({
                       week.weekNumber === 0 ? 53 : week.weekNumber,
                     ),
                   week.days.map(({ date, month }: { date: Date; month: string }) => {
-                    const isDisabled = isDateDisabled(date, minDate.value, maxDate.value, props.disabledDates)
+                    const isDisabled = isDateDisabled(
+                      date,
+                      minDate.value,
+                      maxDate.value,
+                      props.disabledDates,
+                    )
                     return month === 'current' || props.showAdjacementDays
                       ? h(
                           'td',
@@ -702,12 +715,12 @@ const CCalendar = defineComponent({
                                 onFocus: () => handleCalendarMouseEnter(date),
                                 onKeydown: (event: KeyboardEvent) =>
                                   handleCalendarKeyDown(event, date),
-                                onMouseEnter: () => handleCalendarMouseEnter(date),
-                                onMouseLeave: () => handleCalendarMouseLeave(),
+                                onMouseenter: () => handleCalendarMouseEnter(date),
+                                onMouseleave: () => handleCalendarMouseLeave(),
                               }),
                             ...(month !== 'current' &&
                               !props.selectAdjacementDays && {
-                                onMouseEnter: () => handleCalendarMouseLeave(),
+                                onMouseenter: () => handleCalendarMouseLeave(),
                               }),
                           },
                           h(
@@ -751,20 +764,20 @@ const CCalendar = defineComponent({
                           selected: isDateSelected(date, startDate.value, endDate.value),
                           'range-hover':
                             props.selectionType === 'month' &&
-                            (hoverDate && selectEndDate
+                            (hoverDate.value && selectEndDate
                               ? isDateInRange(date, startDate.value, hoverDate.value)
                               : isDateInRange(date, hoverDate.value, endDate.value)),
                           range: isDateInRange(date, startDate.value, endDate.value),
                         },
                       ],
-                      tabindex: !isDisabled ? 0 : -1,
+                      tabindex: isDisabled ? -1 : 0,
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
                         onClick: () => handleCalendarClick(date),
                         onFocus: () => handleCalendarMouseEnter(date),
                         onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
-                        onMouseEnter: () => handleCalendarMouseEnter(date),
-                        onMouseLeave: () => handleCalendarMouseLeave(),
+                        onMouseenter: () => handleCalendarMouseEnter(date),
+                        onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
                     h('div', { class: 'calendar-cell-inner' }, month),
@@ -795,20 +808,20 @@ const CCalendar = defineComponent({
                           selected: isDateSelected(date, startDate.value, endDate.value),
                           'range-hover':
                             props.selectionType === 'year' &&
-                            (hoverDate && selectEndDate
+                            (hoverDate.value && selectEndDate
                               ? isDateInRange(date, startDate.value, hoverDate.value)
                               : isDateInRange(date, hoverDate.value, endDate.value)),
                           range: isDateInRange(date, startDate.value, endDate.value),
                         },
                       ],
-                      tabindex: !isDisabled ? 0 : -1,
+                      tabindex: isDisabled ? -1 : 0,
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
                         onClick: () => handleCalendarClick(date),
                         onFocus: () => handleCalendarMouseEnter(date),
                         onKeydown: (event: KeyboardEvent) => handleCalendarKeyDown(event, date),
-                        onMouseEnter: () => handleCalendarMouseEnter(date),
-                        onMouseLeave: () => handleCalendarMouseLeave(),
+                        onMouseenter: () => handleCalendarMouseEnter(date),
+                        onMouseleave: () => handleCalendarMouseLeave(),
                       }),
                     },
                     h('div', { class: 'calendar-cell-inner' }, year),

package/src/components/card/CCard.ts

@@ -14,7 +14,7 @@ const CCard = defineComponent({
     /**
      * Sets the text color context of the component to one of CoreUI’s themed colors.
      *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'primary-emphasis', 'secondary-emphasis', 'success-emphasis', 'danger-emphasis', 'warning-emphasis', 'info-emphasis', 'light-emphasis', 'body', 'body-emphasis', 'body-secondary', 'body-tertiary', 'black', 'black-50', 'white', 'white-50'
      */
     textColor: TextColor,
   },

package/src/components/card/CCardHeader.ts

@@ -6,13 +6,13 @@ const CCardHeader = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'div',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-header' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-header' }, slots.default && slots.default())
   },
 })
 

package/src/components/card/CCardImage.ts

@@ -6,7 +6,7 @@ const CCardImage = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'img',
     },
@@ -25,7 +25,7 @@ const CCardImage = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: `card-img${props.orientation ? `-${props.orientation}` : ''}`,
         },

package/src/components/card/CCardSubtitle.ts

@@ -6,13 +6,13 @@ const CCardSubtitle = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h6',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-subtitle' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-subtitle' }, slots.default && slots.default())
   },
 })
 export { CCardSubtitle }

package/src/components/card/CCardText.ts

@@ -6,13 +6,13 @@ const CCardText = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'p',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-text' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-text' }, slots.default && slots.default())
   },
 })
 

package/src/components/card/CCardTitle.ts

@@ -6,13 +6,13 @@ const CCardTitle = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h5',
     },
   },
   setup(props, { slots }) {
-    return () => h(props.component, { class: 'card-title' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'card-title' }, slots.default && slots.default())
   },
 })
 

package/src/components/card/__tests__/CCardHeader.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'span',
+    as: 'span',
   },
   slots: {
     default: 'Default slot',

package/src/components/card/__tests__/CCardImage.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'a',
+    as: 'a',
     orientation: 'bottom',
   },
   slots: {

package/src/components/card/__tests__/CCardSubtitle.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h4',
+    as: 'h4',
   },
   slots: {
     default: 'Default slot',

package/src/components/card/__tests__/CCardText.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h4',
+    as: 'h4',
   },
   slots: {
     default: 'Default slot',

package/src/components/card/__tests__/CCardTitle.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
   },
   slots: {
     default: 'Default slot',

package/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CCarousel component renders correctly 1`] = `
-"<div class="carousel slide carousel-fade carousel-dark">
+"<div class="carousel slide carousel-fade" data-coreui-theme="dark">
   <div class="carousel-indicators"></div>
   <div class="carousel-inner"></div><button type="button" class="carousel-control-prev" data-coreui-target=""><span class="carousel-control-prev-icon" ariahidden="true"></span><span class="visually-hidden">Previous</span></button><button type="button" class="carousel-control-next" data-coreui-target=""><span class="carousel-control-next-icon" ariahidden="true"></span><span class="visually-hidden">Next</span></button>
 </div>"

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

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

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

@@ -183,19 +183,19 @@ const CDatePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.1
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.1
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.1
      */
     inputOnChangeDelay: {
       type: Number,
@@ -249,7 +249,7 @@ const CDatePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -268,7 +268,7 @@ const CDatePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     showWeekNumber: Boolean,
     /**
@@ -311,7 +311,7 @@ const CDatePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     weekNumbersLabel: String,
   },

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

@@ -214,19 +214,19 @@ const CDateRangePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.1
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.1
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.1
      */
     inputOnChangeDelay: {
       type: Number,
@@ -316,7 +316,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -335,7 +335,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     showWeekNumber: Boolean,
     /**
@@ -453,7 +453,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.1
      */
     weekNumbersLabel: String,
   },
@@ -825,7 +825,10 @@ const CDateRangePicker = defineComponent({
                           onClick: () => {
                             const date = new Date()
                             startDate.value = date
-                            endDate.value = date
+                            if (props.range) {
+                              endDate.value = date
+                            }
+                            
                             calendarDate.value = date
                           },
                         },
@@ -838,7 +841,10 @@ const CDateRangePicker = defineComponent({
                           color: props.cancelButtonColor,
                           onClick: () => {
                             startDate.value = initialStartDate.value
-                            endDate.value = initialEndDate.value
+                            if (props.range) {
+                              endDate.value = initialEndDate.value
+                            }
+
                             visible.value = false
                           },
                           size: props.cancelButtonSize,

package/src/components/dropdown/CDropdown.ts

@@ -62,12 +62,10 @@ 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-beta.1
+     * @since v5.0.0-rc.1
      */
     container: {
-      type: [Object, String] as PropType<
-        HTMLElement | (() => HTMLElement) | string
-      >,
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
       default: 'body',
     },
     /**
@@ -117,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.1
      */
     teleport: {
       type: Boolean,

package/src/components/dropdown/CDropdownHeader.ts

@@ -6,7 +6,7 @@ const CDropdownHeader = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h6',
     },
@@ -14,7 +14,7 @@ const CDropdownHeader = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'dropdown-header',
         },

package/src/components/dropdown/CDropdownItem.ts

@@ -12,7 +12,7 @@ const CDropdownItem = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
@@ -32,7 +32,7 @@ const CDropdownItem = defineComponent({
         {
           class: 'dropdown-item',
           active: props.active,
-          component: props.component,
+          as: props.as,
           disabled: props.disabled,
           href: props.href,
         },