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

package/src/components/nav/CNavLink.ts

@@ -12,7 +12,7 @@ const CNavLink = 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 CNavLink = defineComponent({
         {
           class: 'nav-link',
           active: props.active,
-          component: props.component,
+          component: props.as,
           disabled: props.disabled,
           href: props.href,
         },

package/src/components/nav/CNavTitle.ts

@@ -2,8 +2,17 @@ import { defineComponent, h } from 'vue'
 
 const CNavTitle = defineComponent({
   name: 'CNavTitle',
-  setup(_, { slots }) {
-    return () => h('li', { class: 'nav-title' }, slots.default && slots.default())
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'li',
+    },
+  },
+  setup(props, { slots }) {
+    return () => h(props.as, { class: 'nav-title' }, slots.default && slots.default())
   },
 })
 

package/src/components/nav/__tests__/CNav.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
     layout: 'fill',
     variant: 'pills',
   },

package/src/components/nav/__tests__/CNavItem.spec.ts

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

package/src/components/nav/__tests__/CNavLink.spec.ts

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

package/src/components/navbar/CNavbar.ts

@@ -5,6 +5,13 @@ import { Color } from '../../props'
 const CNavbar = defineComponent({
   name: 'CNavbar',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'nav',
+    },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -22,13 +29,6 @@ const CNavbar = defineComponent({
         return ['dark', 'light'].includes(value)
       },
     },
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'nav',
-    },
     /**
      * Defines optional container wrapping children elements.
      *
@@ -68,7 +68,7 @@ const CNavbar = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             'navbar',

package/src/components/navbar/CNavbarBrand.ts

@@ -7,7 +7,7 @@ const CNavbarBrand = defineComponent({
      * Component used for the root node. Either a string to use a HTML element or a component.
      *
      */
-    component: {
+    as: {
       type: String,
       default: 'a',
     },
@@ -19,7 +19,7 @@ const CNavbarBrand = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component ?? (props.href ? 'a' : 'span'),
+        props.as ?? (props.href ? 'a' : 'span'),
         {
           class: 'navbar-brand',
           href: props.href,

package/src/components/navbar/CNavbarNav.ts

@@ -6,7 +6,7 @@ const CNavbarNav = 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 CNavbarNav = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'navbar-nav',
           role: 'navigation',

package/src/components/navbar/__tests__/CNavbar.spec.ts

@@ -12,9 +12,9 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
+    as: 'div',
     color: 'warning',
     colorScheme: 'light',
-    component: 'div',
     container: 'lg',
     expand: 'xl',
     placement: 'fixed-bottom',

package/src/components/navbar/__tests__/CNavbarBrand.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'div',
+    as: 'div',
     href: '/bazinga',
   },
   slots: {

package/src/components/navbar/__tests__/CNavbarNav.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/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CNavbar component renders correctly 1`] = `
-"<div class="navbar bg-warning navbar-light navbar-expand-xl fixed-bottom">
+"<div class="navbar bg-warning navbar-expand-xl fixed-bottom" data-coreui-theme="light">
   <div class="container-lg">Default slot</div>
 </div>"
 `;

package/src/components/offcanvas/COffcanvasTitle.ts

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

package/src/components/offcanvas/__tests__/COffcanvasTitle.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/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize COffcanvas component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<transition-stub appear="true" persisted="false" css="false">
   <div class="offcanvas offcanvas-bottom" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
 <transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">
@@ -10,7 +10,7 @@ exports[`Customize COffcanvas component renders correctly 1`] = `
 `;
 
 exports[`Loads and display COffcanvas component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<transition-stub appear="true" persisted="false" css="false">
   <div class="offcanvas offcanvas-end" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
 <transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">

package/src/components/pagination/CPaginationItem.ts

@@ -12,7 +12,7 @@ const CPaginationItem = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: String,
+    as: String,
     /**
      * Toggle the disabled state for the component.
      */
@@ -24,7 +24,7 @@ const CPaginationItem = defineComponent({
   },
   setup(props, { slots }) {
     return () => {
-      const component = props.component ?? (props.active ? 'span' : 'a')
+      const component = props.as ?? (props.active ? 'span' : 'a')
       return h(
         'li',
         {

package/src/components/placeholder/CPlaceholder.ts

@@ -25,19 +25,19 @@ export const CPlaceholder = defineComponent({
         return ['glow', 'wave'].includes(value)
       },
     },
-    /**
-     * 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: 'span',
     },
+    /**
+     * 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,
     /**
      * Size the component extra small, small, or large.
      *
@@ -93,7 +93,7 @@ export const CPlaceholder = defineComponent({
 
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             props.animation ? `placeholder-${props.animation}` : 'placeholder',

package/src/components/popover/CPopover.ts

@@ -1,11 +1,11 @@
-import { defineComponent, h, PropType, ref, RendererElement, Transition } from 'vue'
+import { defineComponent, h, onMounted, PropType, ref, RendererElement, Transition } from 'vue'
 import type { Placement } from '@popperjs/core'
 
 import { CConditionalTeleport } from '../conditional-teleport'
 import { usePopper } from '../../composables'
 import type { Placements, Triggers } from '../../types'
 import { executeAfterTransition } from '../../utils/transition'
-import { getRTLPlacement } from '../../utils'
+import { getRTLPlacement, getUID } from '../../utils'
 
 const CPopover = defineComponent({
   name: 'CPopover',
@@ -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-beta.1
+     * @since v5.0.0-rc.1
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
@@ -117,6 +117,7 @@ const CPopover = defineComponent({
   setup(props, { attrs, slots, emit }) {
     const togglerRef = ref()
     const popoverRef = ref()
+    const uID = ref()
     const visible = ref(props.visible)
     const { initPopper, destroyPopper } = usePopper()
 
@@ -147,6 +148,10 @@ const CPopover = defineComponent({
       placement: getRTLPlacement(props.placement, togglerRef.value),
     }
 
+    onMounted(() => {
+      uID.value = getUID('popover')
+    })
+
     const handleEnter = (el: RendererElement, done: () => void) => {
       emit('show')
       initPopper(togglerRef.value, popoverRef.value, popperConfig)
@@ -206,6 +211,7 @@ const CPopover = defineComponent({
                       },
                       attrs.class,
                     ],
+                    id: uID.value,
                     ref: popoverRef,
                     role: 'tooltip',
                   },
@@ -234,6 +240,7 @@ const CPopover = defineComponent({
       ),
       slots.toggler &&
         slots.toggler({
+          id: visible.value ? uID.value : null,
           on: {
             click: (event: Event) =>
               props.trigger.includes('click') && toggleVisible(event, !visible.value),

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-beta.1
+     * @since 5.0.0-rc.1
      */
     progressBarClassName: String,
     /**

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgress component renders correctly 1`] = `"<div class="progress progress-thin progress-white" style="height: 100px;">Default slot</div>"`;
+exports[`Customize CProgress component renders correctly 1`] = `
+"<div class="progress progress-thin progress-white" style="height: 100px;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;
 
-exports[`Loads and display CProgress component renders correctly 1`] = `"<div class="progress" style="">Default slot</div>"`;
+exports[`Loads and display CProgress component renders correctly 1`] = `
+"<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 75%;">Default slot</div>"`;
 
-exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>"`;

package/src/components/sidebar/CSidebar.ts

@@ -70,7 +70,10 @@ const CSidebar = defineComponent({
     /**
      * Toggle the visibility of sidebar component.
      */
-    visible: Boolean,
+    visible: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   emits: [
     /**
@@ -93,11 +96,9 @@ const CSidebar = defineComponent({
     const mobile = ref()
     const visibleMobile = ref(false)
     const visibleDesktop = ref(
-      props.visible !== undefined ? props.visible : props.overlaid ? false : true,
+      props.visible === undefined ? (props.overlaid ? false : true) : props.visible,
     )
 
-    // const visible = ref(props.visible)
-
     watch(inViewport, () => {
       emit('visible-change', inViewport.value)
       inViewport.value ? emit('show') : emit('hide')
@@ -194,7 +195,8 @@ const CSidebar = defineComponent({
               [`sidebar-${props.position}`]: props.position,
               [`sidebar-${props.size}`]: props.size,
               'sidebar-narrow-unfoldable': props.unfoldable,
-              show: (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
+              show:
+                (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
               hide: visibleDesktop.value === false && !mobile.value && !props.overlaid,
             },
             attrs.class,

package/src/components/sidebar/CSidebarBrand.ts

@@ -2,8 +2,27 @@ import { defineComponent, h } from 'vue'
 
 const CSidebarBrand = defineComponent({
   name: 'CSidebarBrand',
-  setup(_, { slots }) {
-    return () => h('div', { class: 'sidebar-brand' }, slots.default && slots.default())
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     *
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
+    /**
+     * The href attribute specifies the URL of the page the link goes to.
+     */
+    href: String,
+  },
+  setup(props, { slots }) {
+    return () =>
+      h(
+        props.as ?? (props.href ? 'a' : 'div'),
+        { class: 'sidebar-brand', href: props.href },
+        slots.default && slots.default(),
+      )
   },
 })
 

package/src/components/sidebar/CSidebarNav.ts

@@ -1,8 +1,17 @@
-import { defineComponent, h, ref } from 'vue'
+import { Component, defineComponent, h, ref, PropType } from 'vue'
 
 const CSidebarNav = defineComponent({
   name: 'CSidebarNav',
-  setup(_, { slots }) {
+  props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: [Object, String] as PropType<string | Component>,
+      default: 'ul',
+    },
+  },
+  setup(props, { slots }) {
     const visibleGroup = ref()
 
     const handleVisibleChange = (visible: boolean, index: number) => {
@@ -19,21 +28,24 @@ const CSidebarNav = defineComponent({
 
     return () =>
       h(
-        'ul',
+        props.as,
         {
           class: 'sidebar-nav',
         },
-        slots.default &&
-          slots.default().map((vnode, index) => {
-            // @ts-expect-error name is defined in component
-            if (vnode.type.name === 'CNavGroup') {
-              return h(vnode, {
-                onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index + 1),
-                ...(visibleGroup.value && { visible: isVisible(index + 1) }),
-              })
-            }
-            return vnode
-          }),
+        {
+          default: () =>
+            slots.default &&
+            slots.default().map((vnode, index) => {
+              // @ts-expect-error name is defined in component
+              if (vnode.type.name === 'CNavGroup') {
+                return h(vnode, {
+                  onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index + 1),
+                  ...(visibleGroup.value && { visible: isVisible(index + 1) }),
+                })
+              }
+              return vnode
+            }),
+        },
       )
   },
 })

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable">Default slot</div>"`;
+exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable show">Default slot</div>"`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar hide">Default slot</div>"`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar">Default slot</div>"`;

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

@@ -751,7 +751,7 @@ const CSmartTable = defineComponent({
                       h(
                         CSmartTableHead,
                         {
-                          component: 'head',
+                          as: 'head',
                           ...props.tableHeadProps,
                           columnFilter: props.columnFilter,
                           columnFilterValue: columnFilterState.value,
@@ -830,11 +830,11 @@ const CSmartTable = defineComponent({
                     typeof props.footer === 'boolean' &&
                       props.footer &&
                       h(CSmartTableHead, {
-                        component: 'footer',
+                        as: 'footer',
                         ...props.tableFootProps,
                         columnFilter: false,
                         columnSorter: false,
-                        columns: props.columns ? props.columns : columnNames.value,
+                        columns: props.columns ?? columnNames.value,
                         selectable: props.selectable,
                         selectAll: props.selectAll,
                         selectedAll: selectedAll.value,

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

@@ -19,13 +19,13 @@ import type { Column, ColumnFilter, ColumnFilterValue, Item, Sorter, SorterValue
 const CSmartTableHead = defineComponent({
   name: 'CSmartTableHead',
   props: {
-    columnFilter: [Boolean, Object] as PropType<boolean | ColumnFilter>,
-    columnFilterValue: Object as PropType<ColumnFilterValue>,
-    columnSorter: [Boolean, Object] as PropType<boolean | Sorter>,
-    component: {
+    as: {
       type: String,
       default: 'head',
     },
+    columnFilter: [Boolean, Object] as PropType<boolean | ColumnFilter>,
+    columnFilterValue: Object as PropType<ColumnFilterValue>,
+    columnSorter: [Boolean, Object] as PropType<boolean | Sorter>,
     columns: {
       type: Array as PropType<(Column | string)[]>,
       default: () => [],
@@ -56,8 +56,8 @@ const CSmartTableHead = defineComponent({
         selectedAll.value = props.selectedAll
       },
       {
-        immediate: true
-      }
+        immediate: true,
+      },
     )
 
     watch([selectedAll, seleactAllCheckboxRef], () => {
@@ -109,7 +109,7 @@ const CSmartTableHead = defineComponent({
 
     return () =>
       h(
-        props.component === 'head' ? CTableHead : CTableFoot,
+        props.as === 'head' ? CTableHead : CTableFoot,
         {},
         {
           default: () => [
@@ -130,7 +130,7 @@ const CSmartTableHead = defineComponent({
                     ),
                   ),
                 ]),
-              ]), 
+              ]),
             h(
               CTableRow,
               {},
@@ -148,7 +148,7 @@ const CSmartTableHead = defineComponent({
                           } else {
                             selectedAll.value = ''
                           }
-          
+
                           emit('selectAllChecked')
                         },
                       }),

package/src/components/spinner/CSpinner.ts

@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CSpinner = defineComponent({
   name: 'CSpinner',
   props: {
+        /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+        as: {
+          type: String,
+          default: 'div',
+        },
     /**
      * Sets the color context of the component to one of CoreUI’s themed colors.
      *
@@ -23,13 +30,6 @@ const CSpinner = defineComponent({
         ].includes(value)
       },
     },
-    /**
-     * Component used for the root node. Either a string to use a HTML element or a component.
-     */
-    component: {
-      type: String,
-      default: 'div',
-    },
     /**
      * Size the component small.
      *
@@ -64,7 +64,7 @@ const CSpinner = defineComponent({
   setup(props) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: [
             `spinner-${props.variant}`,

package/src/components/spinner/__tests__/CSpinner.spec.ts

@@ -12,8 +12,8 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
+    as: 'h4',
     color: 'warning',
-    component: 'h4',
     size: 'sm',
     variant: 'grow',
     visuallyHiddenLabel: 'visuallyHiddenLabel',

package/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow text-warning spinner-grow-sm" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
+exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow spinner-grow-sm text-warning" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
 
-exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border text-undefined" role="status"><span class="visually-hidden">Loading...</span></div>"`;
+exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>"`;