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

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.1
      */
     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.1
      */
     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.1
      */
     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.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-rc.0
+     * @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-rc.0
+     * @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-rc.0
+     * @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-rc.0
+     * @since v5.0.0-rc.1
      */
     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.1
      */
     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.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-rc.0
+     * @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-rc.0
+     * @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-rc.0
+     * @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,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.1
      */
     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.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,
         },

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(),
             ),

package/src/components/dropdown/CDropdownToggle.ts

@@ -18,6 +18,13 @@ import type { Triggers } from '../../types'
 const CDropdownToggle = defineComponent({
   name: 'CDropdownToggle',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'button',
+    },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -31,13 +38,6 @@ const CDropdownToggle = defineComponent({
       type: Boolean,
       default: true,
     },
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'button',
-    },
     /**
      * Create a custom toggler which accepts any content.
      */
@@ -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-rc.0
+     * @since v5.0.0-rc.1
      */
     navLink: {
       type: Boolean,
@@ -162,35 +162,35 @@ const CDropdownToggle = defineComponent({
             }),
           )
         : dropdownVariant === 'nav-item' && props.navLink
-        ? h(
-            'a',
-            {
-              href: '#',
-              ...togglerProps.value,
-              role: 'button',
-              ref: dropdownToggleRef,
-            },
-            { default: () => slots.default && slots.default() },
-          )
-        : h(
-            CButton,
-            {
-              ...togglerProps.value,
-              color: props.color,
-              component: props.component,
-              disabled: props.disabled,
-              shape: props.shape,
-              size: props.size,
-              variant: props.variant,
-              ref: (el) => {
-                togglerRef.value = el
+          ? h(
+              'a',
+              {
+                href: '#',
+                ...togglerProps.value,
+                role: 'button',
+                ref: dropdownToggleRef,
               },
-            },
-            () =>
-              props.split
-                ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
-                : slots.default && slots.default(),
-          )
+              { default: () => slots.default && slots.default() },
+            )
+          : h(
+              CButton,
+              {
+                ...togglerProps.value,
+                color: props.color,
+                component: props.as,
+                disabled: props.disabled,
+                shape: props.shape,
+                size: props.size,
+                variant: props.variant,
+                ref: (el) => {
+                  togglerRef.value = el
+                },
+              },
+              () =>
+                props.split
+                  ? h('span', { class: 'visually-hidden' }, 'Toggle Dropdown')
+                  : slots.default && slots.default(),
+            )
   },
 })
 

package/src/components/dropdown/__tests__/CDropdownHeader.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/dropdown/__tests__/CDropdownItem.spec.ts

@@ -13,7 +13,7 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
-    component: 'div',
+    as: 'div',
     disabled: true,
     href: '/bazinga',
   },

package/src/components/dropdown/__tests__/CDropdownMenu.spec.ts

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

package/src/components/form/CFormCheck.ts

@@ -204,7 +204,7 @@ const CFormCheck = defineComponent({
         ? h(
             CButton,
             {
-              component: 'label',
+              as: 'label',
               ...props.button,
               ...(props.id && { for: props.id }),
             },

package/src/components/form/CFormFeedback.ts

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

package/src/components/form/CFormText.ts

@@ -6,13 +6,13 @@ const CFormText = 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: 'form-text' }, slots.default && slots.default())
+    return () => h(props.as, { class: 'form-text' }, slots.default && slots.default())
   },
 })
 

package/src/components/form/CInputGroupText.ts

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

package/src/components/form/__tests__/CFormFeedback.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
     invalid: true,
     tooltip: true,
     valid: true,
@@ -24,7 +24,7 @@ const customWrapper = mount(Component, {
 
 const customWrapperTwo = mount(Component, {
   propsData: {
-    component: 'h2',
+    as: 'h2',
     invalid: true,
     tooltip: false,
     valid: true,

package/src/components/form/__tests__/CFormText.spec.ts

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

package/src/components/form/__tests__/CInputGroupText.spec.ts

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

package/src/components/form/index.ts

@@ -1,7 +1,6 @@
 import { App } from 'vue'
 import { CForm } from './CForm'
 import { CFormCheck } from './CFormCheck'
-// import { CFormControl } from './CFormControl'
 import { CFormFeedback } from './CFormFeedback'
 import { CFormFloating } from './CFormFloating'
 import { CFormInput } from './CFormInput'
@@ -18,7 +17,6 @@ const CFormPlugin = {
   install: (app: App): void => {
     app.component(CForm.name, CForm)
     app.component(CFormCheck.name, CFormCheck)
-    // app.component(CFormControl.name, CFormControl)
     app.component(CFormFeedback.name, CFormFeedback)
     app.component(CFormFloating.name, CFormFloating)
     app.component(CFormInput.name, CFormInput)
@@ -37,7 +35,6 @@ export {
   CFormPlugin,
   CForm,
   CFormCheck,
-  // CFormControl,
   CFormFeedback,
   CFormFloating,
   CFormInput,

package/src/components/header/CHeaderBrand.ts

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

package/src/components/header/CHeaderNav.ts

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

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

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

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

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

package/src/components/link/CLink.ts

@@ -10,7 +10,7 @@ const CLink = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
@@ -39,12 +39,12 @@ const CLink = defineComponent({
     }
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [{ active: props.active, disabled: props.disabled }],
           ...(props.active && { 'aria-current': 'page' }),
-          ...(props.component === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
-          ...((props.component === 'a' || props.component === 'button') && {
+          ...(props.as === 'a' && props.disabled && { 'aria-disabled': true, tabIndex: -1 }),
+          ...((props.as === 'a' || props.as === 'button') && {
             onClick: handleClick,
           }),
           href: props.href,

package/src/components/link/__tests__/CLink.spec.ts

@@ -15,7 +15,7 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
-    component: 'div',
+    as: 'div',
     disabled: true,
     href: '/bazinga',
   },

package/src/components/list-group/CListGroup.ts

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

package/src/components/list-group/CListGroupItem.ts

@@ -9,6 +9,13 @@ const CListGroupItem = defineComponent({
      * Toggle the active state for the component.
      */
     active: Boolean,
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'li',
+    },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -19,29 +26,22 @@ const CListGroupItem = defineComponent({
      * Toggle the disabled state for the component.
      */
     disabled: Boolean,
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'li',
-    },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             'list-group-item',
             {
               [`list-group-item-${props.color}`]: props.color,
-              'list-group-item-action': props.component === 'a' || props.component === 'button',
+              'list-group-item-action': props.as === 'a' || props.as === 'button',
               [`active`]: props.active,
               [`disabled`]: props.disabled,
             },
           ],
-          ...((props.component === 'a' || props.component === 'button') && {
+          ...((props.as === 'a' || props.as === 'button') && {
             active: props.active,
             disabled: props.disabled,
           }),

package/src/components/list-group/__tests__/CListGroup.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
     flush: true,
     layout: 'horizontal-lg',
   },

package/src/components/list-group/__tests__/CListGroupItem.spec.ts

@@ -13,9 +13,9 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
+    as: 'div',
     color: 'warning',
     disabled: true,
-    component: 'div',
   },
   slots: {
     default: 'Default slot',
@@ -24,8 +24,8 @@ const customWrapper = mount(Component, {
 
 const customWrapperTwo = mount(Component, {
   propsData: {
-    component: 'button',
     active: true,
+    as: 'button',
     disabled: true,
   },
   slots: {