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

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-beta.1
+     * @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/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.ts.snap

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CDropdownMenu component renders correctly 1`] = `
-"<ul class="dropdown-menu dropdown-menu-dark show dropdown-menu-lg-end" data-coreui-popper="static">
-  <li>Default slot</li>
-</ul>"
+"<!--teleport start-->
+<!--teleport end-->"
 `;
 
-exports[`Loads and display CDropdownMenu component renders correctly 1`] = `"<div class="dropdown-menu dropdown-menu-lg-end" data-coreui-popper="static">Default slot</div>"`;
+exports[`Loads and display CDropdownMenu component renders correctly 1`] = `
+"<!--teleport start-->
+<!--teleport end-->"
+`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a active="true" class="nav-link dropdown-toggle-split active disabled show" disabled="true" href="#">Default slot</a>"`;
+exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a href="#" class="nav-link dropdown-toggle-split disabled show" aria-expanded="true" role="button" active="true">Default slot</a>"`;
 
-exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class="btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split active disabled show" disabled="" type="button"><span class="visually-hidden">Toggle Dropdown</span></button>"`;
+exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class="btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split disabled show" type="button" disabled="" aria-expanded="true"><span class="visually-hidden">Toggle Dropdown</span></button>"`;

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/__tests__/__snapshots__/CFormCheck.spec.ts.snap

@@ -2,12 +2,12 @@
 
 exports[`Customize with label - CFormCheck component renders correctly 1`] = `
 "<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
-<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
+<label class="btn btn-outline-warning btn-lg rounded-circle" for="uniqueid">some label</label>"
 `;
 
 exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `
 "<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
-<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
+<label class="btn btn-outline-warning btn-lg rounded-circle" for="uniqueid">some label</label>"
 `;
 
 exports[`Loads and display CFormCheck component renders correctly 1`] = `"<input class="form-check-input" type="checkbox">"`;

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: {

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-beta.1
+     * @since v5.0.0-rc.1
      */
     focus: {
       type: Boolean,

package/src/components/modal/CModalTitle.ts

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

package/src/components/modal/__tests__/CModalTitle.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/modal/__tests__/__snapshots__/CModal.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`Customize CModal component renders correctly 1`] = `
 "<transition-stub appear="false" persisted="false" css="false">
-  <div class="modal">
-    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg" role="dialog">
+  <div class="modal" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg">
       <div class="modal-content bazinga">Default slot</div>
     </div>
   </div>
@@ -12,8 +12,8 @@ exports[`Customize CModal component renders correctly 1`] = `
 
 exports[`Loads and display CModal component renders correctly 1`] = `
 "<transition-stub appear="false" persisted="false" css="false">
-  <div class="modal fade">
-    <div class="modal-dialog modal-fullscreen" role="dialog">
+  <div class="modal fade" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-fullscreen">
       <div class="modal-content">Default slot</div>
     </div>
   </div>

package/src/components/nav/CNav.ts

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

package/src/components/nav/CNavGroup.ts

@@ -5,6 +5,13 @@ import { executeAfterTransition } from '../../utils/transition'
 const CNavGroup = defineComponent({
   name: 'CNavGroup',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'li',
+    },
     /**
      * Make nav group more compact by cutting all `padding` in half.
      */
@@ -93,7 +100,7 @@ const CNavGroup = defineComponent({
 
     return () =>
       h(
-        'li',
+        props.as,
         {
           class: 'nav-group',
           ref: navGroupRef,
@@ -123,7 +130,7 @@ const CNavGroup = defineComponent({
               default: () =>
                 visible.value &&
                 h(
-                  'ul',
+                  props.as === 'div' ? 'div' : 'ul',
                   {
                     class: [
                       'nav-group-items',

package/src/components/nav/CNavItem.ts

@@ -6,12 +6,20 @@ const CNavItem = defineComponent({
   name: 'CNavItem',
   props: {
     ...CNavLink.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(
-        'li',
+        props.as,
         {
+          as: props.component,
           class: 'nav-item',
         },
         props.href
@@ -19,7 +27,6 @@ const CNavItem = defineComponent({
               CNavLink,
               {
                 active: props.active,
-                component: props.component,
                 disabled: props.disabled,
                 href: props.href,
               },