Skip to content

Commit b5c0864

Browse files
mrholekmrholek
committed
refactor: improve polymorphic components
1 parent c064719 commit b5c0864

File tree

106 files changed

+532
-348
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+532
-348
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ export const CAlertHeading = defineComponent({
66
/**
77
* Component used for the root node. Either a string to use a HTML element or a component.
88
*/
9-
component: {
9+
as: {
1010
type: String,
1111
default: 'h4',
1212
},
1313
},
1414
setup(props, { slots }) {
1515
return () =>
1616
h(
17-
props.component,
17+
props.as,
1818
{
1919
class: 'alert-heading',
2020
},

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, {
1212

1313
const customWrapper = mount(Component, {
1414
propsData: {
15-
component: 'h2',
15+
as: 'h2',
1616
},
1717
slots: {
1818
default: 'Default slot',

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const CBadge = defineComponent({
1414
/**
1515
* Component used for the root node. Either a string to use a HTML element or a component.
1616
*/
17-
component: {
17+
as: {
1818
type: String,
1919
default: 'span',
2020
},
@@ -56,7 +56,7 @@ const CBadge = defineComponent({
5656
setup(props, { slots }) {
5757
return () =>
5858
h(
59-
props.component,
59+
props.as,
6060
{
6161
class: [
6262
'badge',

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,19 @@ export const CButton = defineComponent({
99
* Toggle the active state for the component.
1010
*/
1111
active: Boolean,
12-
/**
13-
* Sets the color context of the component to one of CoreUI’s themed colors.
14-
*
15-
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
16-
*/
17-
color: Color,
1812
/**
1913
* Component used for the root node. Either a string to use a HTML element or a component.
2014
*/
21-
component: {
15+
as: {
2216
type: String,
2317
default: 'button',
2418
},
19+
/**
20+
* Sets the color context of the component to one of CoreUI’s themed colors.
21+
*
22+
* @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light'
23+
*/
24+
color: Color,
2525
/**
2626
* Toggle the disabled state for the component.
2727
*/
@@ -79,7 +79,7 @@ export const CButton = defineComponent({
7979
'click',
8080
],
8181
setup(props, { emit, slots }) {
82-
const component = props.href ? 'a' : props.component
82+
const component = props.href ? 'a' : props.as
8383
const handleClick = (event: Event) => {
8484
if (props.disabled) {
8585
return

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ const defaultWrapper = mount(Component, {
1313
const customWrapper = mount(Component, {
1414
propsData: {
1515
active: true,
16+
as: 'div',
1617
color: 'warning',
17-
component: 'div',
1818
disabled: true,
1919
href: '/bazinga',
2020
shape: 'rounded-pill',
@@ -28,8 +28,8 @@ const customWrapper = mount(Component, {
2828

2929
const customWrapperTwo = mount(Component, {
3030
propsData: {
31+
as: 'a',
3132
color: 'warning',
32-
component: 'a',
3333
disabled: true,
3434
},
3535
slots: {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ const CCardHeader = defineComponent({
66
/**
77
* Component used for the root node. Either a string to use a HTML element or a component.
88
*/
9-
component: {
9+
as: {
1010
type: String,
1111
default: 'div',
1212
},
1313
},
1414
setup(props, { slots }) {
15-
return () => h(props.component, { class: 'card-header' }, slots.default && slots.default())
15+
return () => h(props.as, { class: 'card-header' }, slots.default && slots.default())
1616
},
1717
})
1818

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const CCardImage = defineComponent({
66
/**
77
* Component used for the root node. Either a string to use a HTML element or a component.
88
*/
9-
component: {
9+
as: {
1010
type: String,
1111
default: 'img',
1212
},
@@ -25,7 +25,7 @@ const CCardImage = defineComponent({
2525
setup(props, { slots }) {
2626
return () =>
2727
h(
28-
props.component,
28+
props.as,
2929
{
3030
class: `card-img${props.orientation ? `-${props.orientation}` : ''}`,
3131
},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ const CCardSubtitle = defineComponent({
66
/**
77
* Component used for the root node. Either a string to use a HTML element or a component.
88
*/
9-
component: {
9+
as: {
1010
type: String,
1111
default: 'h6',
1212
},
1313
},
1414
setup(props, { slots }) {
15-
return () => h(props.component, { class: 'card-subtitle' }, slots.default && slots.default())
15+
return () => h(props.as, { class: 'card-subtitle' }, slots.default && slots.default())
1616
},
1717
})
1818
export { CCardSubtitle }

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ const CCardText = defineComponent({
66
/**
77
* Component used for the root node. Either a string to use a HTML element or a component.
88
*/
9-
component: {
9+
as: {
1010
type: String,
1111
default: 'p',
1212
},
1313
},
1414
setup(props, { slots }) {
15-
return () => h(props.component, { class: 'card-text' }, slots.default && slots.default())
15+
return () => h(props.as, { class: 'card-text' }, slots.default && slots.default())
1616
},
1717
})
1818

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ const CCardTitle = defineComponent({
66
/**
77
* Component used for the root node. Either a string to use a HTML element or a component.
88
*/
9-
component: {
9+
as: {
1010
type: String,
1111
default: 'h5',
1212
},
1313
},
1414
setup(props, { slots }) {
15-
return () => h(props.component, { class: 'card-title' }, slots.default && slots.default())
15+
return () => h(props.as, { class: 'card-title' }, slots.default && slots.default())
1616
},
1717
})
1818

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy