refactor: improve polymorphic components

Author: mrholek

packages/coreui-vue/src/components/alert/CAlertHeading.ts

@@ -6,15 +6,15 @@ export const CAlertHeading = defineComponent({
     /**
      * 	Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'h4',
     },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'alert-heading',
         },

packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts

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

packages/coreui-vue/src/components/badge/CBadge.ts

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

packages/coreui-vue/src/components/button/CButton.ts

@@ -9,19 +9,19 @@ export const CButton = defineComponent({
      * Toggle the active state for the component.
      */
     active: Boolean,
-    /**
-     * 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: 'button',
     },
+    /**
+     * 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,
     /**
      * Toggle the disabled state for the component.
      */
@@ -79,7 +79,7 @@ export const CButton = defineComponent({
     'click',
   ],
   setup(props, { emit, slots }) {
-    const component = props.href ? 'a' : props.component
+    const component = props.href ? 'a' : props.as
     const handleClick = (event: Event) => {
       if (props.disabled) {
         return

packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts

@@ -13,8 +13,8 @@ const defaultWrapper = mount(Component, {
 const customWrapper = mount(Component, {
   propsData: {
     active: true,
+    as: 'div',
     color: 'warning',
-    component: 'div',
     disabled: true,
     href: '/bazinga',
     shape: 'rounded-pill',
@@ -28,8 +28,8 @@ const customWrapper = mount(Component, {
 
 const customWrapperTwo = mount(Component, {
   propsData: {
+    as: 'a',
     color: 'warning',
-    component: 'a',
     disabled: true,
   },
   slots: {

packages/coreui-vue/src/components/card/CCardHeader.ts

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

packages/coreui-vue/src/components/card/CCardImage.ts

@@ -6,7 +6,7 @@ const CCardImage = defineComponent({
     /**
      * Component used for the root node. Either a string to use a HTML element or a component.
      */
-    component: {
+    as: {
       type: String,
       default: 'img',
     },
@@ -25,7 +25,7 @@ const CCardImage = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: `card-img${props.orientation ? `-${props.orientation}` : ''}`,
         },

packages/coreui-vue/src/components/card/CCardSubtitle.ts

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

packages/coreui-vue/src/components/card/CCardText.ts

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

packages/coreui-vue/src/components/card/CCardTitle.ts

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

packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts

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

packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts

@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
 
 const customWrapper = mount(Component, {
   propsData: {
-    component: 'a',
+    as: 'a',
     orientation: 'bottom',
   },
   slots: {

packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts

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

packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts

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

packages/coreui-vue/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',

packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts

@@ -6,15 +6,15 @@ 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',
     },
   },
   setup(props, { slots }) {
     return () =>
       h(
-        props.component,
+        props.as,
         {
           class: 'dropdown-header',
         },

packages/coreui-vue/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,
         },

packages/coreui-vue/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(),
             ),

packages/coreui-vue/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.
      */
@@ -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(),
+            )
   },
 })
 

packages/coreui-vue/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',