@coreui/vue-pro 5.0.0-rc.0 → 5.0.0-rc.2

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/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-rc.0
+     * @since 5.0.0-rc.2
      */
     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-rc.0
+     * @since 5.0.0-rc.2
      */
     showWeekNumber: Boolean,
     /**
@@ -174,7 +174,7 @@ const CCalendar = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.0
+     * @since 5.0.0-rc.2
      */
     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/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/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-rc.0
+     * @since v5.0.0-rc.2
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

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-rc.0
+     * @since v5.0.0-rc.2
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.0
+     * @since v5.0.0-rc.2
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.0
+     * @since v5.0.0-rc.2
      */
     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-rc.0
+     * @since 5.0.0-rc.2
      */
     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-rc.0
+     * @since 5.0.0-rc.2
      */
     showWeekNumber: Boolean,
     /**
@@ -311,7 +311,7 @@ const CDatePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.0
+     * @since 5.0.0-rc.2
      */
     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-rc.0
+     * @since v5.0.0-rc.2
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-rc.0
+     * @since v5.0.0-rc.2
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-rc.0
+     * @since v5.0.0-rc.2
      */
     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-rc.0
+     * @since 5.0.0-rc.2
      */
     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-rc.0
+     * @since 5.0.0-rc.2
      */
     showWeekNumber: Boolean,
     /**
@@ -453,7 +453,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-rc.0
+     * @since 5.0.0-rc.2
      */
     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,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-rc.0
+     * @since v5.0.0-rc.2
      */
     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-rc.0
+     * @since v5.0.0-rc.2
      */
     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,
         },

package/src/components/dropdown/CDropdownMenu.ts

@@ -12,7 +12,7 @@ const CDropdownMenu = defineComponent({
      *
      * @values 'div', 'ul'
      */
-    component: {
+    as: {
       type: String,
       default: 'div',
     },
@@ -34,7 +34,7 @@ const CDropdownMenu = defineComponent({
         {
           default: () =>
             h(
-              props.component,
+              props.as,
               {
                 ...attrs,
                 class: [
@@ -49,7 +49,7 @@ const CDropdownMenu = defineComponent({
                 ...(dark && { 'data-coreui-theme': 'dark' }),
                 ref: dropdownMenuRef,
               },
-              props.component === 'ul'
+              props.as === 'ul'
                 ? slots.default && slots.default().map((vnode) => h('li', {}, vnode))
                 : slots.default && slots.default(),
             ),