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

package/src/components/form/CFormCheck.ts

@@ -189,7 +189,7 @@ const CFormCheck = defineComponent({
     const formControl = () => {
       return h('input', {
         ...attrs,
-        ...((props.modelValue || props.value) && { checked: isChecked.value }),
+        ...(props.modelValue && { checked: isChecked.value }),
         class: inputClassName,
         id: props.id,
         indeterminate: props.indeterminate,
@@ -236,26 +236,26 @@ const CFormCheck = defineComponent({
       props.button
         ? [formControl(), (slots.label || props.label) && formLabel(), formValidation()]
         : props.label
-        ? props.hitArea
-          ? [
-              h(
-                CFormLabel,
+          ? props.hitArea
+            ? [
+                h(
+                  CFormLabel,
+                  {
+                    customClassName: className,
+                    ...(props.id && { for: props.id }),
+                  },
+                  [formControl(), props.label],
+                ),
+                formValidation(),
+              ]
+            : h(
+                'div',
                 {
-                  customClassName: className,
-                  ...(props.id && { for: props.id }),
+                  class: className,
                 },
-                [formControl(), props.label],
-              ),
-              formValidation(),
-            ]
-          : h(
-              'div',
-              {
-                class: className,
-              },
-              [formControl(), props.label && formLabel(), formValidation()],
-            )
-        : formControl()
+                [formControl(), props.label && formLabel(), formValidation()],
+              )
+          : formControl()
   },
 })
 

package/src/components/form/CFormSwitch.ts

@@ -94,6 +94,7 @@ const CFormSwitch = defineComponent({
                 'is-invalid': props.invalid,
                 'is-valid': props.valid,
               },
+              attrs.class,
             ],
             id: props.id,
             onChange: (event: InputEvent) => handleChange(event),

package/src/components/form/CFormTextarea.ts

@@ -133,6 +133,7 @@ const CFormTextarea = defineComponent({
                     'is-invalid': props.invalid,
                     'is-valid': props.valid,
                   },
+                  attrs.class,
                 ],
                 onChange: (event: InputEvent) => handleChange(event),
                 onInput: (event: InputEvent) => handleInput(event),

package/src/components/form/index.ts

@@ -15,19 +15,19 @@ import { CInputGroupText } from './CInputGroupText'
 
 const CFormPlugin = {
   install: (app: App): void => {
-    app.component(CForm.name, CForm)
-    app.component(CFormCheck.name, CFormCheck)
-    app.component(CFormFeedback.name, CFormFeedback)
-    app.component(CFormFloating.name, CFormFloating)
-    app.component(CFormInput.name, CFormInput)
-    app.component(CFormLabel.name, CFormLabel)
-    app.component(CFormRange.name, CFormRange)
-    app.component(CFormSelect.name, CFormSelect)
-    app.component(CFormSwitch.name, CFormSwitch)
-    app.component(CFormText.name, CFormText)
-    app.component(CFormTextarea.name, CFormTextarea)
-    app.component(CInputGroup.name, CInputGroup)
-    app.component(CInputGroupText.name, CInputGroupText)
+    app.component(CForm.name as string, CForm)
+    app.component(CFormCheck.name as string, CFormCheck)
+    app.component(CFormFeedback.name as string, CFormFeedback)
+    app.component(CFormFloating.name as string, CFormFloating)
+    app.component(CFormInput.name as string, CFormInput)
+    app.component(CFormLabel.name as string, CFormLabel)
+    app.component(CFormRange.name as string, CFormRange)
+    app.component(CFormSelect.name as string, CFormSelect)
+    app.component(CFormSwitch.name as string, CFormSwitch)
+    app.component(CFormText.name as string, CFormText)
+    app.component(CFormTextarea.name as string, CFormTextarea)
+    app.component(CInputGroup.name as string, CInputGroup)
+    app.component(CInputGroupText.name as string, CInputGroupText)
   },
 }
 

package/src/components/grid/index.ts

@@ -5,9 +5,9 @@ import { CRow } from './CRow'
 
 const CGridPlugin = {
   install: (app: App): void => {
-    app.component(CCol.name, CCol)
-    app.component(CContainer.name, CContainer)
-    app.component(CRow.name, CRow)
+    app.component(CCol.name as string, CCol)
+    app.component(CContainer.name as string, CContainer)
+    app.component(CRow.name as string, CRow)
   },
 }
 export { CGridPlugin, CCol, CContainer, CRow }

package/src/components/header/index.ts

@@ -8,12 +8,12 @@ import { CHeaderToggler } from './CHeaderToggler'
 
 const CHeaderPlugin = {
   install: (app: App): void => {
-    app.component(CHeader.name, CHeader)
-    app.component(CHeaderBrand.name, CHeaderBrand)
-    app.component(CHeaderDivider.name, CHeaderDivider)
-    app.component(CHeaderNav.name, CHeaderNav)
-    app.component(CHeaderText.name, CHeaderText)
-    app.component(CHeaderToggler.name, CHeaderToggler)
+    app.component(CHeader.name as string, CHeader)
+    app.component(CHeaderBrand.name as string, CHeaderBrand)
+    app.component(CHeaderDivider.name as string, CHeaderDivider)
+    app.component(CHeaderNav.name as string, CHeaderNav)
+    app.component(CHeaderText.name as string, CHeaderText)
+    app.component(CHeaderToggler.name as string, CHeaderToggler)
   },
 }
 

package/src/components/image/index.ts

@@ -3,7 +3,7 @@ import { CImage } from './CImage'
 
 const CImagePlugin = {
   install: (app: App): void => {
-    app.component(CImage.name, CImage)
+    app.component(CImage.name as string, CImage)
   },
 }
 

package/src/components/link/index.ts

@@ -3,7 +3,7 @@ import { CLink } from './CLink'
 
 const CCLinkPlugin = {
   install: (app: App): void => {
-    app.component(CLink.name, CLink)
+    app.component(CLink.name as string, CLink)
   },
 }
 

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

@@ -4,8 +4,8 @@ import { CListGroupItem } from './CListGroupItem'
 
 const CListGroupPlugin = {
   install: (app: App): void => {
-    app.component(CListGroup.name, CListGroup)
-    app.component(CListGroupItem.name, CListGroupItem)
+    app.component(CListGroup.name as string, CListGroup)
+    app.component(CListGroupItem.name as string, CListGroupItem)
   },
 }
 

package/src/components/loading-button/index.ts

@@ -3,7 +3,7 @@ import { CLoadingButton } from './CLoadingButton'
 
 const CLoadingButtonPlugin = {
   install: (app: App): void => {
-    app.component(CLoadingButton.name, CLoadingButton)
+    app.component(CLoadingButton.name as string, CLoadingButton)
   },
 }
 

package/src/components/modal/CModal.ts

@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-rc.1
+     * @since v5.0.0-rc.3
      */
     focus: {
       type: Boolean,

package/src/components/modal/index.ts

@@ -7,11 +7,11 @@ import { CModalTitle } from './CModalTitle'
 
 const CModalPlugin = {
   install: (app: App): void => {
-    app.component(CModal.name, CModal)
-    app.component(CModalBody.name, CModalBody)
-    app.component(CModalFooter.name, CModalFooter)
-    app.component(CModalHeader.name, CModalHeader)
-    app.component(CModalTitle.name, CModalTitle)
+    app.component(CModal.name as string, CModal)
+    app.component(CModalBody.name as string, CModalBody)
+    app.component(CModalFooter.name as string, CModalFooter)
+    app.component(CModalHeader.name as string, CModalHeader)
+    app.component(CModalTitle.name as string, CModalTitle)
   },
 }
 

package/src/components/multi-select/index.ts

@@ -3,7 +3,7 @@ import { CMultiSelect } from './CMultiSelect'
 
 const CMultiSelectPlugin = {
   install: (app: App): void => {
-    app.component(CMultiSelect.name, CMultiSelect)
+    app.component(CMultiSelect.name as string, CMultiSelect)
   },
 }
 

package/src/components/nav/CNavLink.ts

@@ -30,9 +30,9 @@ const CNavLink = defineComponent({
       h(
         CLink,
         {
-          class: 'nav-link',
+          as: props.as,
           active: props.active,
-          component: props.as,
+          class: 'nav-link',
           disabled: props.disabled,
           href: props.href,
         },

package/src/components/nav/index.ts

@@ -8,12 +8,12 @@ import { CNavTitle } from './CNavTitle'
 
 const CNavPlugin = {
   install: (app: App): void => {
-    app.component(CNav.name, CNav)
-    app.component(CNavGroup.name, CNavGroup)
-    app.component(CNavGroupItems.name, CNavGroupItems)
-    app.component(CNavItem.name, CNavItem)
-    app.component(CNavLink.name, CNavLink)
-    app.component(CNavTitle.name, CNavTitle)
+    app.component(CNav.name as string, CNav)
+    app.component(CNavGroup.name as string, CNavGroup)
+    app.component(CNavGroupItems.name as string, CNavGroupItems)
+    app.component(CNavItem.name as string, CNavItem)
+    app.component(CNavLink.name as string, CNavLink)
+    app.component(CNavTitle.name as string, CNavTitle)
   },
 }
 

package/src/components/navbar/index.ts

@@ -7,11 +7,11 @@ import { CNavbarToggler } from './CNavbarToggler'
 
 const CNavbarPlugin = {
   install: (app: App): void => {
-    app.component(CNavbar.name, CNavbar)
-    app.component(CNavbarBrand.name, CNavbarBrand)
-    app.component(CNavbarNav.name, CNavbarNav)
-    app.component(CNavbarText.name, CNavbarText)
-    app.component(CNavbarToggler.name, CNavbarToggler)
+    app.component(CNavbar.name as string, CNavbar)
+    app.component(CNavbarBrand.name as string, CNavbarBrand)
+    app.component(CNavbarNav.name as string, CNavbarNav)
+    app.component(CNavbarText.name as string, CNavbarText)
+    app.component(CNavbarToggler.name as string, CNavbarToggler)
   },
 }
 

package/src/components/offcanvas/COffcanvas.ts

@@ -7,6 +7,7 @@ import { executeAfterTransition } from '../../utils/transition'
 
 const COffcanvas = defineComponent({
   name: 'COffcanvas',
+  inheritAttrs: false,
   props: {
     /**
      * Apply a backdrop on body while offcanvas is open.
@@ -94,7 +95,7 @@ const COffcanvas = defineComponent({
      */
     'show',
   ],
-  setup(props, { slots, emit }) {
+  setup(props, { attrs, emit, slots }) {
     const offcanvasRef = ref()
     const visible = ref(props.visible)
 
@@ -175,6 +176,7 @@ const COffcanvas = defineComponent({
             h(
               'div',
               {
+                ...attrs,
                 class: [
                   {
                     [`offcanvas${
@@ -182,6 +184,7 @@ const COffcanvas = defineComponent({
                     }`]: props.responsive,
                     [`offcanvas-${props.placement}`]: props.placement,
                   },
+                  attrs.class,
                 ],
                 onKeydown: (event: KeyboardEvent) => handleKeyDown(event),
                 ref: offcanvasRef,

package/src/components/offcanvas/index.ts

@@ -6,10 +6,10 @@ import { COffcanvasTitle } from './COffcanvasTitle'
 
 const COffcanvasPlugin = {
   install: (app: App): void => {
-    app.component(COffcanvas.name, COffcanvas)
-    app.component(COffcanvasBody.name, COffcanvasBody)
-    app.component(COffcanvasHeader.name, COffcanvasHeader)
-    app.component(COffcanvasTitle.name, COffcanvasTitle)
+    app.component(COffcanvas.name as string, COffcanvas)
+    app.component(COffcanvasBody.name as string, COffcanvasBody)
+    app.component(COffcanvasHeader.name as string, COffcanvasHeader)
+    app.component(COffcanvasTitle.name as string, COffcanvasTitle)
   },
 }
 

package/src/components/pagination/CPaginationItem.ts

@@ -41,8 +41,8 @@ const CPaginationItem = defineComponent({
           ? h(
               CLink,
               {
+                as: component,
                 class: ['page-link'],
-                component: component,
                 href: props.href,
               },
               {

package/src/components/pagination/index.ts

@@ -4,8 +4,8 @@ import { CPaginationItem } from './CPaginationItem'
 
 const CPaginationPlugin = {
   install: (app: App): void => {
-    app.component(CPagination.name, CPagination)
-    app.component(CPaginationItem.name, CPaginationItem)
+    app.component(CPagination.name as string, CPagination)
+    app.component(CPaginationItem.name as string, CPaginationItem)
   },
 }
 

package/src/components/picker/index.ts

@@ -3,7 +3,7 @@ import { CPicker } from './CPicker'
 
 const CPickerPlugin = {
   install: (app: App): void => {
-    app.component(CPicker.name, CPicker)
+    app.component(CPicker.name as string, CPicker)
   },
 }
 

package/src/components/placeholder/index.ts

@@ -3,7 +3,7 @@ import { CPlaceholder } from './CPlaceholder'
 
 const CPlaceholderPlugin = {
   install: (app: App): void => {
-    app.component(CPlaceholder.name, CPlaceholder)
+    app.component(CPlaceholder.name as string, CPlaceholder)
   },
 }
 

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-rc.1
+     * @since v5.0.0-rc.3
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

package/src/components/popover/index.ts

@@ -3,7 +3,7 @@ import { CPopover } from './CPopover'
 
 const CPopoverPlugin = {
   install: (app: App): void => {
-    app.component(CPopover.name, CPopover)
+    app.component(CPopover.name as string, CPopover)
   },
 }
 

package/src/components/progress/CProgress.ts

@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-rc.1
+     * @since 5.0.0-rc.3
      */
     progressBarClassName: String,
     /**

package/src/components/progress/index.ts

@@ -5,9 +5,9 @@ import { CProgressStacked } from './CProgressStacked'
 
 const CProgressPlugin = {
   install: (app: App): void => {
-    app.component(CProgress.name, CProgress)
-    app.component(CProgressBar.name, CProgressBar)
-    app.component(CProgressStacked.name, CProgressStacked)
+    app.component(CProgress.name as string, CProgress)
+    app.component(CProgressBar.name as string, CProgressBar)
+    app.component(CProgressStacked.name as string, CProgressStacked)
   },
 }
 

package/src/components/sidebar/index.ts

@@ -8,12 +8,12 @@ import { CSidebarToggler } from './CSidebarToggler'
 
 const CSidebarPlugin = {
   install: (app: App): void => {
-    app.component(CSidebar.name, CSidebar)
-    app.component(CSidebarBrand.name, CSidebarBrand)
-    app.component(CSidebarFooter.name, CSidebarFooter)
-    app.component(CSidebarHeader.name, CSidebarHeader)
-    app.component(CSidebarNav.name, CSidebarNav)
-    app.component(CSidebarToggler.name, CSidebarToggler)
+    app.component(CSidebar.name as string, CSidebar)
+    app.component(CSidebarBrand.name as string, CSidebarBrand)
+    app.component(CSidebarFooter.name as string, CSidebarFooter)
+    app.component(CSidebarHeader.name as string, CSidebarHeader)
+    app.component(CSidebarNav.name as string, CSidebarNav)
+    app.component(CSidebarToggler.name as string, CSidebarToggler)
   },
 }
 

package/src/components/smart-pagination/index.ts

@@ -3,7 +3,7 @@ import { CSmartPagination } from './CSmartPagination'
 
 const CSmartPaginationPlugin = {
   install: (app: App): void => {
-    app.component(CSmartPagination.name, CSmartPagination)
+    app.component(CSmartPagination.name as string, CSmartPagination)
   },
 }
 

package/src/components/smart-table/index.ts

@@ -3,7 +3,7 @@ import { CSmartTable } from './CSmartTable'
 
 const CSmartTablePlugin = {
   install: (app: App): void => {
-    app.component(CSmartTable.name, CSmartTable)
+    app.component(CSmartTable.name as string, CSmartTable)
   },
 }
 

package/src/components/spinner/index.ts

@@ -3,7 +3,7 @@ import { CSpinner } from './CSpinner'
 
 const CSpinnerPlugin = {
   install: (app: App): void => {
-    app.component(CSpinner.name, CSpinner)
+    app.component(CSpinner.name as string, CSpinner)
   },
 }
 

package/src/components/table/index.ts

@@ -10,14 +10,14 @@ import { CTableRow } from './CTableRow'
 
 const CTablePlugin = {
   install: (app: App): void => {
-    app.component(CTable.name, CTable)
-    app.component(CTableBody.name, CTableBody)
-    app.component(CTableCaption.name, CTableCaption)
-    app.component(CTableDataCell.name, CTableDataCell)
-    app.component(CTableFoot.name, CTableFoot)
-    app.component(CTableHead.name, CTableHead)
-    app.component(CTableHeaderCell.name, CTableHeaderCell)
-    app.component(CTableRow.name, CTableRow)
+    app.component(CTable.name as string, CTable)
+    app.component(CTableBody.name as string, CTableBody)
+    app.component(CTableCaption.name as string, CTableCaption)
+    app.component(CTableDataCell.name as string, CTableDataCell)
+    app.component(CTableFoot.name as string, CTableFoot)
+    app.component(CTableHead.name as string, CTableHead)
+    app.component(CTableHeaderCell.name as string, CTableHeaderCell)
+    app.component(CTableRow.name as string, CTableRow)
   },
 }
 

package/src/components/tabs/index.ts

@@ -4,8 +4,8 @@ import { CTabPane } from './CTabPane'
 
 const CTabsPlugin = {
   install: (app: App): void => {
-    app.component(CTabContent.name, CTabContent)
-    app.component(CTabPane.name, CTabPane)
+    app.component(CTabContent.name as string, CTabContent)
+    app.component(CTabPane.name as string, CTabPane)
   },
 }