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

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.2
      */
     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

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

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

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,
         },