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