From b5c08642dcc10a2123b0dea171efa6ec013296a6 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 2 Jan 2024 16:36:32 +0100 Subject: [PATCH 001/101] refactor: improve polymorphic components --- .../src/components/alert/CAlertHeading.ts | 4 +- .../alert/__tests__/CAlertHeading.spec.ts | 2 +- .../coreui-vue/src/components/badge/CBadge.ts | 4 +- .../src/components/button/CButton.ts | 16 +-- .../button/__tests__/CButton.spec.ts | 4 +- .../src/components/card/CCardHeader.ts | 4 +- .../src/components/card/CCardImage.ts | 4 +- .../src/components/card/CCardSubtitle.ts | 4 +- .../src/components/card/CCardText.ts | 4 +- .../src/components/card/CCardTitle.ts | 4 +- .../card/__tests__/CCardHeader.spec.ts | 2 +- .../card/__tests__/CCardImage.spec.ts | 2 +- .../card/__tests__/CCardSubtitle.spec.ts | 2 +- .../card/__tests__/CCardText.spec.ts | 2 +- .../card/__tests__/CCardTitle.spec.ts | 2 +- .../components/dropdown/CDropdownHeader.ts | 4 +- .../src/components/dropdown/CDropdownItem.ts | 4 +- .../src/components/dropdown/CDropdownMenu.ts | 6 +- .../components/dropdown/CDropdownToggle.ts | 70 +++++----- .../__tests__/CDropdownHeader.spec.ts | 2 +- .../dropdown/__tests__/CDropdownItem.spec.ts | 2 +- .../dropdown/__tests__/CDropdownMenu.spec.ts | 2 +- .../src/components/form/CFormCheck.ts | 2 +- .../src/components/form/CFormFeedback.ts | 4 +- .../src/components/form/CFormText.ts | 4 +- .../src/components/form/CInputGroupText.ts | 4 +- .../form/__tests__/CFormFeedback.spec.ts | 4 +- .../form/__tests__/CFormText.spec.ts | 2 +- .../form/__tests__/CInputGroupText.spec.ts | 2 +- .../src/components/header/CHeaderBrand.ts | 4 +- .../src/components/header/CHeaderNav.ts | 4 +- .../header/__tests__/CHeaderBrand.spec.ts | 2 +- .../header/__tests__/CHeaderNav.spec.ts | 2 +- .../coreui-vue/src/components/link/CLink.ts | 8 +- .../components/link/__tests__/CLink.spec.ts | 2 +- .../src/components/list-group/CListGroup.ts | 4 +- .../components/list-group/CListGroupItem.ts | 20 +-- .../list-group/__tests__/CListGroup.spec.ts | 2 +- .../__tests__/CListGroupItem.spec.ts | 4 +- .../src/components/modal/CModalTitle.ts | 4 +- .../modal/__tests__/CModalTitle.spec.ts | 2 +- .../coreui-vue/src/components/nav/CNav.ts | 4 +- .../src/components/nav/CNavGroup.ts | 11 +- .../coreui-vue/src/components/nav/CNavItem.ts | 11 +- .../coreui-vue/src/components/nav/CNavLink.ts | 4 +- .../src/components/nav/CNavTitle.ts | 13 +- .../src/components/nav/__tests__/CNav.spec.ts | 2 +- .../components/nav/__tests__/CNavItem.spec.ts | 2 +- .../components/nav/__tests__/CNavLink.spec.ts | 2 +- .../src/components/navbar/CNavbar.ts | 16 +-- .../src/components/navbar/CNavbarBrand.ts | 4 +- .../src/components/navbar/CNavbarNav.ts | 4 +- .../navbar/__tests__/CNavbar.spec.ts | 2 +- .../navbar/__tests__/CNavbarBrand.spec.ts | 2 +- .../navbar/__tests__/CNavbarNav.spec.ts | 2 +- .../components/offcanvas/COffcanvasTitle.ts | 4 +- .../__tests__/COffcanvasTitle.spec.ts | 2 +- .../components/pagination/CPaginationItem.ts | 4 +- .../components/placeholder/CPlaceholder.ts | 16 +-- .../src/components/sidebar/CSidebarNav.ts | 40 ++++-- .../src/components/spinner/CSpinner.ts | 16 +-- .../spinner/__tests__/CSpinner.spec.ts | 2 +- .../src/components/toast/CToastClose.ts | 6 +- .../toast/__tests__/CToastClose.spec.ts | 2 +- packages/docs/api/alert/CAlertHeading.api.md | 6 +- packages/docs/api/badge/CBadge.api.md | 2 +- packages/docs/api/button/CButton.api.md | 22 +-- packages/docs/api/card/CCardHeader.api.md | 6 +- packages/docs/api/card/CCardImage.api.md | 2 +- packages/docs/api/card/CCardSubtitle.api.md | 6 +- packages/docs/api/card/CCardText.api.md | 6 +- packages/docs/api/card/CCardTitle.api.md | 6 +- .../CConditionalTeleport.api.md | 6 +- packages/docs/api/dropdown/CDropdown.api.md | 26 ++-- .../docs/api/dropdown/CDropdownHeader.api.md | 6 +- .../docs/api/dropdown/CDropdownItem.api.md | 12 +- .../docs/api/dropdown/CDropdownMenu.api.md | 6 +- .../docs/api/dropdown/CDropdownToggle.api.md | 22 +-- packages/docs/api/form/CFormFeedback.api.md | 12 +- packages/docs/api/form/CFormText.api.md | 6 +- packages/docs/api/form/CInputGroupText.api.md | 6 +- packages/docs/api/header/CHeaderBrand.api.md | 6 +- packages/docs/api/header/CHeaderNav.api.md | 6 +- packages/docs/api/link/CLink.api.md | 12 +- .../docs/api/list-group/CListGroup.api.md | 10 +- .../docs/api/list-group/CListGroupItem.api.md | 12 +- packages/docs/api/modal/CModal.api.md | 24 ++-- packages/docs/api/modal/CModalTitle.api.md | 6 +- packages/docs/api/nav/CNav.api.md | 10 +- packages/docs/api/nav/CNavGroup.api.md | 9 +- packages/docs/api/nav/CNavItem.api.md | 6 + packages/docs/api/nav/CNavLink.api.md | 10 +- packages/docs/api/nav/CNavTitle.api.md | 6 + packages/docs/api/navbar/CNavbar.api.md | 2 +- packages/docs/api/navbar/CNavbarBrand.api.md | 8 +- packages/docs/api/navbar/CNavbarNav.api.md | 6 +- .../docs/api/offcanvas/COffcanvasTitle.api.md | 6 +- .../api/pagination/CPaginationItem.api.md | 12 +- .../docs/api/placeholder/CPlaceholder.api.md | 2 +- packages/docs/api/popover/CPopover.api.md | 2 +- packages/docs/api/progress/CProgress.api.md | 18 +-- packages/docs/api/sidebar/CSidebarNav.api.md | 6 + packages/docs/api/spinner/CSpinner.api.md | 2 +- packages/docs/api/toast/CToastClose.api.md | 6 +- packages/docs/api/tooltip/CTooltip.api.md | 2 +- packages/docs/migration/v5.md | 132 +++++++++++++++++- 106 files changed, 532 insertions(+), 348 deletions(-) diff --git a/packages/coreui-vue/src/components/alert/CAlertHeading.ts b/packages/coreui-vue/src/components/alert/CAlertHeading.ts index fbf38c69..94ed187c 100644 --- a/packages/coreui-vue/src/components/alert/CAlertHeading.ts +++ b/packages/coreui-vue/src/components/alert/CAlertHeading.ts @@ -6,7 +6,7 @@ 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', }, @@ -14,7 +14,7 @@ export const CAlertHeading = defineComponent({ setup(props, { slots }) { return () => h( - props.component, + props.as, { class: 'alert-heading', }, diff --git a/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts b/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts index 628ba7ad..73448f41 100644 --- a/packages/coreui-vue/src/components/alert/__tests__/CAlertHeading.spec.ts +++ b/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', diff --git a/packages/coreui-vue/src/components/badge/CBadge.ts b/packages/coreui-vue/src/components/badge/CBadge.ts index 765d998a..6fdfd798 100644 --- a/packages/coreui-vue/src/components/badge/CBadge.ts +++ b/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', diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts index 235bd972..e918cbfc 100644 --- a/packages/coreui-vue/src/components/button/CButton.ts +++ b/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 diff --git a/packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts b/packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts index a739380f..a0aeded1 100644 --- a/packages/coreui-vue/src/components/button/__tests__/CButton.spec.ts +++ b/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: { diff --git a/packages/coreui-vue/src/components/card/CCardHeader.ts b/packages/coreui-vue/src/components/card/CCardHeader.ts index 722ba187..d216d892 100644 --- a/packages/coreui-vue/src/components/card/CCardHeader.ts +++ b/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()) }, }) diff --git a/packages/coreui-vue/src/components/card/CCardImage.ts b/packages/coreui-vue/src/components/card/CCardImage.ts index ee8695b9..81ff7fc0 100644 --- a/packages/coreui-vue/src/components/card/CCardImage.ts +++ b/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}` : ''}`, }, diff --git a/packages/coreui-vue/src/components/card/CCardSubtitle.ts b/packages/coreui-vue/src/components/card/CCardSubtitle.ts index 5a950776..b3bdf933 100644 --- a/packages/coreui-vue/src/components/card/CCardSubtitle.ts +++ b/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 } diff --git a/packages/coreui-vue/src/components/card/CCardText.ts b/packages/coreui-vue/src/components/card/CCardText.ts index 759ff7e8..0f26e875 100644 --- a/packages/coreui-vue/src/components/card/CCardText.ts +++ b/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()) }, }) diff --git a/packages/coreui-vue/src/components/card/CCardTitle.ts b/packages/coreui-vue/src/components/card/CCardTitle.ts index bc540e15..4564bdf0 100644 --- a/packages/coreui-vue/src/components/card/CCardTitle.ts +++ b/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()) }, }) diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts index ded11542..01e950c4 100644 --- a/packages/coreui-vue/src/components/card/__tests__/CCardHeader.spec.ts +++ b/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', diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts index da8cf0fb..342a74fa 100644 --- a/packages/coreui-vue/src/components/card/__tests__/CCardImage.spec.ts +++ b/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: { diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts index ae90329c..d78f05ad 100644 --- a/packages/coreui-vue/src/components/card/__tests__/CCardSubtitle.spec.ts +++ b/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', diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts index b77ce9ff..cf03e29a 100644 --- a/packages/coreui-vue/src/components/card/__tests__/CCardText.spec.ts +++ b/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', diff --git a/packages/coreui-vue/src/components/card/__tests__/CCardTitle.spec.ts b/packages/coreui-vue/src/components/card/__tests__/CCardTitle.spec.ts index b6628c9f..a3c28d5d 100644 --- a/packages/coreui-vue/src/components/card/__tests__/CCardTitle.spec.ts +++ b/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', diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts b/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts index 0ee6018e..ea630404 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts +++ b/packages/coreui-vue/src/components/dropdown/CDropdownHeader.ts @@ -6,7 +6,7 @@ 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', }, @@ -14,7 +14,7 @@ const CDropdownHeader = defineComponent({ setup(props, { slots }) { return () => h( - props.component, + props.as, { class: 'dropdown-header', }, diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts b/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts index fdd01393..49b1ea68 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownItem.ts +++ b/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, }, diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts b/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts index 02fefabf..29791bac 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownMenu.ts +++ b/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(), ), diff --git a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts b/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts index 136a60b8..55eec579 100644 --- a/packages/coreui-vue/src/components/dropdown/CDropdownToggle.ts +++ b/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(), + ) }, }) diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownHeader.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownHeader.spec.ts index 6ed72559..2401c7e8 100644 --- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownHeader.spec.ts +++ b/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', diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownItem.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownItem.spec.ts index bf153451..de5d2b11 100644 --- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownItem.spec.ts +++ b/packages/coreui-vue/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', }, diff --git a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts b/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts index 265388de..23c7d3d7 100644 --- a/packages/coreui-vue/src/components/dropdown/__tests__/CDropdownMenu.spec.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/form/CFormCheck.ts b/packages/coreui-vue/src/components/form/CFormCheck.ts index c7ed6edc..ea044fba 100644 --- a/packages/coreui-vue/src/components/form/CFormCheck.ts +++ b/packages/coreui-vue/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 }), }, diff --git a/packages/coreui-vue/src/components/form/CFormFeedback.ts b/packages/coreui-vue/src/components/form/CFormFeedback.ts index 3a7d9a16..df4d496e 100644 --- a/packages/coreui-vue/src/components/form/CFormFeedback.ts +++ b/packages/coreui-vue/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: [ { diff --git a/packages/coreui-vue/src/components/form/CFormText.ts b/packages/coreui-vue/src/components/form/CFormText.ts index 13b47ada..5ed6b00c 100644 --- a/packages/coreui-vue/src/components/form/CFormText.ts +++ b/packages/coreui-vue/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()) }, }) diff --git a/packages/coreui-vue/src/components/form/CInputGroupText.ts b/packages/coreui-vue/src/components/form/CInputGroupText.ts index 92717357..d44172a7 100644 --- a/packages/coreui-vue/src/components/form/CInputGroupText.ts +++ b/packages/coreui-vue/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()) }, }) diff --git a/packages/coreui-vue/src/components/form/__tests__/CFormFeedback.spec.ts b/packages/coreui-vue/src/components/form/__tests__/CFormFeedback.spec.ts index 86349ea2..c1351c6c 100644 --- a/packages/coreui-vue/src/components/form/__tests__/CFormFeedback.spec.ts +++ b/packages/coreui-vue/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, diff --git a/packages/coreui-vue/src/components/form/__tests__/CFormText.spec.ts b/packages/coreui-vue/src/components/form/__tests__/CFormText.spec.ts index 224ad547..16a5de47 100644 --- a/packages/coreui-vue/src/components/form/__tests__/CFormText.spec.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/form/__tests__/CInputGroupText.spec.ts b/packages/coreui-vue/src/components/form/__tests__/CInputGroupText.spec.ts index 2ba2af6d..48a39878 100644 --- a/packages/coreui-vue/src/components/form/__tests__/CInputGroupText.spec.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/header/CHeaderBrand.ts b/packages/coreui-vue/src/components/header/CHeaderBrand.ts index 97ee9581..3f94fb86 100644 --- a/packages/coreui-vue/src/components/header/CHeaderBrand.ts +++ b/packages/coreui-vue/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()) }, }) diff --git a/packages/coreui-vue/src/components/header/CHeaderNav.ts b/packages/coreui-vue/src/components/header/CHeaderNav.ts index 1fa1e7c7..e34277e0 100644 --- a/packages/coreui-vue/src/components/header/CHeaderNav.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeaderBrand.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeaderBrand.spec.ts index 10df823a..391e1e0d 100644 --- a/packages/coreui-vue/src/components/header/__tests__/CHeaderBrand.spec.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/header/__tests__/CHeaderNav.spec.ts b/packages/coreui-vue/src/components/header/__tests__/CHeaderNav.spec.ts index 13867aaa..6564189f 100644 --- a/packages/coreui-vue/src/components/header/__tests__/CHeaderNav.spec.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/link/CLink.ts b/packages/coreui-vue/src/components/link/CLink.ts index d2627605..78369306 100644 --- a/packages/coreui-vue/src/components/link/CLink.ts +++ b/packages/coreui-vue/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, diff --git a/packages/coreui-vue/src/components/link/__tests__/CLink.spec.ts b/packages/coreui-vue/src/components/link/__tests__/CLink.spec.ts index f3c8c7dd..59a21a9c 100644 --- a/packages/coreui-vue/src/components/link/__tests__/CLink.spec.ts +++ b/packages/coreui-vue/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', }, diff --git a/packages/coreui-vue/src/components/list-group/CListGroup.ts b/packages/coreui-vue/src/components/list-group/CListGroup.ts index 57003be4..9a565fe0 100644 --- a/packages/coreui-vue/src/components/list-group/CListGroup.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/list-group/CListGroupItem.ts b/packages/coreui-vue/src/components/list-group/CListGroupItem.ts index 0342f1fe..204df42f 100644 --- a/packages/coreui-vue/src/components/list-group/CListGroupItem.ts +++ b/packages/coreui-vue/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, }), diff --git a/packages/coreui-vue/src/components/list-group/__tests__/CListGroup.spec.ts b/packages/coreui-vue/src/components/list-group/__tests__/CListGroup.spec.ts index 092d62c2..f80906c1 100644 --- a/packages/coreui-vue/src/components/list-group/__tests__/CListGroup.spec.ts +++ b/packages/coreui-vue/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', }, diff --git a/packages/coreui-vue/src/components/list-group/__tests__/CListGroupItem.spec.ts b/packages/coreui-vue/src/components/list-group/__tests__/CListGroupItem.spec.ts index 41e9def2..763880b5 100644 --- a/packages/coreui-vue/src/components/list-group/__tests__/CListGroupItem.spec.ts +++ b/packages/coreui-vue/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: { diff --git a/packages/coreui-vue/src/components/modal/CModalTitle.ts b/packages/coreui-vue/src/components/modal/CModalTitle.ts index ea970c09..a845f68c 100644 --- a/packages/coreui-vue/src/components/modal/CModalTitle.ts +++ b/packages/coreui-vue/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()) }, }) diff --git a/packages/coreui-vue/src/components/modal/__tests__/CModalTitle.spec.ts b/packages/coreui-vue/src/components/modal/__tests__/CModalTitle.spec.ts index 28df672b..387f355d 100644 --- a/packages/coreui-vue/src/components/modal/__tests__/CModalTitle.spec.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/nav/CNav.ts b/packages/coreui-vue/src/components/nav/CNav.ts index ebde0a25..922603e9 100644 --- a/packages/coreui-vue/src/components/nav/CNav.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/nav/CNavGroup.ts b/packages/coreui-vue/src/components/nav/CNavGroup.ts index a0e8815f..2c83ccdf 100644 --- a/packages/coreui-vue/src/components/nav/CNavGroup.ts +++ b/packages/coreui-vue/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', diff --git a/packages/coreui-vue/src/components/nav/CNavItem.ts b/packages/coreui-vue/src/components/nav/CNavItem.ts index 19462bda..3ed139c7 100644 --- a/packages/coreui-vue/src/components/nav/CNavItem.ts +++ b/packages/coreui-vue/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, }, diff --git a/packages/coreui-vue/src/components/nav/CNavLink.ts b/packages/coreui-vue/src/components/nav/CNavLink.ts index db5c183d..d2df89bb 100644 --- a/packages/coreui-vue/src/components/nav/CNavLink.ts +++ b/packages/coreui-vue/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, }, diff --git a/packages/coreui-vue/src/components/nav/CNavTitle.ts b/packages/coreui-vue/src/components/nav/CNavTitle.ts index c1a22227..6a808a42 100644 --- a/packages/coreui-vue/src/components/nav/CNavTitle.ts +++ b/packages/coreui-vue/src/components/nav/CNavTitle.ts @@ -2,8 +2,17 @@ import { defineComponent, h } from 'vue' const CNavTitle = defineComponent({ name: 'CNavTitle', - setup(_, { slots }) { - return () => h('li', { class: 'nav-title' }, slots.default && slots.default()) + 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(props.as, { class: 'nav-title' }, slots.default && slots.default()) }, }) diff --git a/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts b/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts index 59ea597d..7b94d89b 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts +++ b/packages/coreui-vue/src/components/nav/__tests__/CNav.spec.ts @@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { - component: 'div', + as: 'div', layout: 'fill', variant: 'pills', }, diff --git a/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts b/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts index f7bee164..fc24c1c2 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts +++ b/packages/coreui-vue/src/components/nav/__tests__/CNavItem.spec.ts @@ -14,7 +14,7 @@ const customWrapper = mount(Component, { propsData: { href: '/bazinga', active: true, - component: 'div', + as: 'div', disabled: true, }, slots: { diff --git a/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts b/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts index 9b334d44..0220a67c 100644 --- a/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts +++ b/packages/coreui-vue/src/components/nav/__tests__/CNavLink.spec.ts @@ -14,7 +14,7 @@ const customWrapper = mount(Component, { propsData: { href: '/bazinga', active: true, - component: 'div', + as: 'div', disabled: true, }, slots: { diff --git a/packages/coreui-vue/src/components/navbar/CNavbar.ts b/packages/coreui-vue/src/components/navbar/CNavbar.ts index 37dceb40..ec6f4991 100644 --- a/packages/coreui-vue/src/components/navbar/CNavbar.ts +++ b/packages/coreui-vue/src/components/navbar/CNavbar.ts @@ -5,6 +5,13 @@ import { Color } from '../../props' const CNavbar = defineComponent({ name: 'CNavbar', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'nav', + }, /** * Sets the color context of the component to one of CoreUI’s themed colors. * @@ -22,13 +29,6 @@ const CNavbar = defineComponent({ return ['dark', 'light'].includes(value) }, }, - /** - * Component used for the root node. Either a string to use a HTML element or a component. - */ - component: { - type: String, - default: 'nav', - }, /** * Defines optional container wrapping children elements. * @@ -68,7 +68,7 @@ const CNavbar = defineComponent({ setup(props, { slots }) { return () => h( - props.component, + props.as, { class: [ 'navbar', diff --git a/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts b/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts index bd8e5211..25a50b93 100644 --- a/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts +++ b/packages/coreui-vue/src/components/navbar/CNavbarBrand.ts @@ -7,7 +7,7 @@ const CNavbarBrand = defineComponent({ * Component used for the root node. Either a string to use a HTML element or a component. * */ - component: { + as: { type: String, default: 'a', }, @@ -19,7 +19,7 @@ const CNavbarBrand = defineComponent({ setup(props, { slots }) { return () => h( - props.component ?? (props.href ? 'a' : 'span'), + props.as ?? (props.href ? 'a' : 'span'), { class: 'navbar-brand', href: props.href, diff --git a/packages/coreui-vue/src/components/navbar/CNavbarNav.ts b/packages/coreui-vue/src/components/navbar/CNavbarNav.ts index 7a36931f..338882e1 100644 --- a/packages/coreui-vue/src/components/navbar/CNavbarNav.ts +++ b/packages/coreui-vue/src/components/navbar/CNavbarNav.ts @@ -6,7 +6,7 @@ const CNavbarNav = 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 CNavbarNav = defineComponent({ setup(props, { slots }) { return () => h( - props.component, + props.as, { class: 'navbar-nav', role: 'navigation', diff --git a/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts b/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts index aa081f28..6c533fb4 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts +++ b/packages/coreui-vue/src/components/navbar/__tests__/CNavbar.spec.ts @@ -12,9 +12,9 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { + as: 'div', color: 'warning', colorScheme: 'light', - component: 'div', container: 'lg', expand: 'xl', placement: 'fixed-bottom', diff --git a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts index f4b1c5d1..8f9b1b7e 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts +++ b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarBrand.spec.ts @@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { - component: 'div', + as: 'div', href: '/bazinga', }, slots: { diff --git a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts index 74db8a76..3c51ea8c 100644 --- a/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts +++ b/packages/coreui-vue/src/components/navbar/__tests__/CNavbarNav.spec.ts @@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { - component: 'div', + as: 'div', }, slots: { default: 'Default slot', diff --git a/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts b/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts index 0ea9f496..6a1cc18e 100644 --- a/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts +++ b/packages/coreui-vue/src/components/offcanvas/COffcanvasTitle.ts @@ -6,13 +6,13 @@ const COffcanvasTitle = 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: 'offcanvas-title' }, slots.default && slots.default()) + return () => h(props.as, { class: 'offcanvas-title' }, slots.default && slots.default()) }, }) diff --git a/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts b/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts index c41d76eb..7e27792f 100644 --- a/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts +++ b/packages/coreui-vue/src/components/offcanvas/__tests__/COffcanvasTitle.spec.ts @@ -12,7 +12,7 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { - component: 'div', + as: 'div', }, slots: { default: 'Default slot', diff --git a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts index 92475524..c997c061 100644 --- a/packages/coreui-vue/src/components/pagination/CPaginationItem.ts +++ b/packages/coreui-vue/src/components/pagination/CPaginationItem.ts @@ -12,7 +12,7 @@ const CPaginationItem = defineComponent({ /** * Component used for the root node. Either a string to use a HTML element or a component. */ - component: String, + as: String, /** * Toggle the disabled state for the component. */ @@ -24,7 +24,7 @@ const CPaginationItem = defineComponent({ }, setup(props, { slots }) { return () => { - const component = props.component ?? (props.active ? 'span' : 'a') + const component = props.as ?? (props.active ? 'span' : 'a') return h( 'li', { diff --git a/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts index 99b69a20..9217bf91 100644 --- a/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts +++ b/packages/coreui-vue/src/components/placeholder/CPlaceholder.ts @@ -25,19 +25,19 @@ export const CPlaceholder = defineComponent({ return ['glow', 'wave'].includes(value) }, }, - /** - * 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: 'span', }, + /** + * 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, /** * Size the component extra small, small, or large. * @@ -93,7 +93,7 @@ export const CPlaceholder = defineComponent({ return () => h( - props.component, + props.as, { class: [ props.animation ? `placeholder-${props.animation}` : 'placeholder', diff --git a/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts b/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts index 2b645744..daea06af 100644 --- a/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts +++ b/packages/coreui-vue/src/components/sidebar/CSidebarNav.ts @@ -1,8 +1,17 @@ -import { defineComponent, h, ref } from 'vue' +import { Component, defineComponent, h, ref, PropType } from 'vue' const CSidebarNav = defineComponent({ name: 'CSidebarNav', - setup(_, { slots }) { + props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: [Object, String] as PropType, + default: 'ul', + }, + }, + setup(props, { slots }) { const visibleGroup = ref() const handleVisibleChange = (visible: boolean, index: number) => { @@ -19,21 +28,24 @@ const CSidebarNav = defineComponent({ return () => h( - 'ul', + props.as, { class: 'sidebar-nav', }, - slots.default && - slots.default().map((vnode, index) => { - // @ts-expect-error name is defined in component - if (vnode.type.name === 'CNavGroup') { - return h(vnode, { - onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index + 1), - ...(visibleGroup.value && { visible: isVisible(index + 1) }), - }) - } - return vnode - }), + { + default: () => + slots.default && + slots.default().map((vnode, index) => { + // @ts-expect-error name is defined in component + if (vnode.type.name === 'CNavGroup') { + return h(vnode, { + onVisibleChange: (visible: boolean) => handleVisibleChange(visible, index + 1), + ...(visibleGroup.value && { visible: isVisible(index + 1) }), + }) + } + return vnode + }), + }, ) }, }) diff --git a/packages/coreui-vue/src/components/spinner/CSpinner.ts b/packages/coreui-vue/src/components/spinner/CSpinner.ts index f773d422..1e4f0f26 100644 --- a/packages/coreui-vue/src/components/spinner/CSpinner.ts +++ b/packages/coreui-vue/src/components/spinner/CSpinner.ts @@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue' const CSpinner = defineComponent({ name: 'CSpinner', props: { + /** + * Component used for the root node. Either a string to use a HTML element or a component. + */ + as: { + type: String, + default: 'div', + }, /** * Sets the color context of the component to one of CoreUI’s themed colors. * @@ -23,13 +30,6 @@ const CSpinner = defineComponent({ ].includes(value) }, }, - /** - * Component used for the root node. Either a string to use a HTML element or a component. - */ - component: { - type: String, - default: 'div', - }, /** * Size the component small. * @@ -64,7 +64,7 @@ const CSpinner = defineComponent({ setup(props) { return () => h( - props.component, + props.as, { class: [ `spinner-${props.variant}`, diff --git a/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts b/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts index 0f1ec0a9..f007df07 100644 --- a/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts +++ b/packages/coreui-vue/src/components/spinner/__tests__/CSpinner.spec.ts @@ -12,8 +12,8 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { + as: 'h4', color: 'warning', - component: 'h4', size: 'sm', variant: 'grow', visuallyHiddenLabel: 'visuallyHiddenLabel', diff --git a/packages/coreui-vue/src/components/toast/CToastClose.ts b/packages/coreui-vue/src/components/toast/CToastClose.ts index f0aedd8d..b00e8dd1 100644 --- a/packages/coreui-vue/src/components/toast/CToastClose.ts +++ b/packages/coreui-vue/src/components/toast/CToastClose.ts @@ -7,7 +7,7 @@ const CToastClose = defineComponent({ /** * Component used for the root node. Either a string to use a HTML element or a component. */ - component: String, + as: String, ...CCloseButton.props, }, emits: [ @@ -24,9 +24,9 @@ const CToastClose = defineComponent({ updateVisible(false) } return () => - props.component + props.as ? h( - props.component, + props.as, { onClick: () => { handleClose() diff --git a/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts b/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts index eee1ba77..b12e21a1 100644 --- a/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts +++ b/packages/coreui-vue/src/components/toast/__tests__/CToastClose.spec.ts @@ -21,7 +21,7 @@ const defaultWrapper = mount(Component, { const customWrapper = mount(Component, { propsData: { - component: CButton, + as: CButton, }, slots: { default: 'Default slot', diff --git a/packages/docs/api/alert/CAlertHeading.api.md b/packages/docs/api/alert/CAlertHeading.api.md index 30262600..da1acd2d 100644 --- a/packages/docs/api/alert/CAlertHeading.api.md +++ b/packages/docs/api/alert/CAlertHeading.api.md @@ -8,6 +8,6 @@ import CAlertHeading from '@coreui/vue/src/components/alert/CAlertHeading' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h4' | +| Prop name | Description | Type | Values | Default | +| --------- | --------------------------------------------------------------------------------------- | ------ | ------ | ------- | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'h4' | diff --git a/packages/docs/api/badge/CBadge.api.md b/packages/docs/api/badge/CBadge.api.md index 0c953392..b3c3e1ff 100644 --- a/packages/docs/api/badge/CBadge.api.md +++ b/packages/docs/api/badge/CBadge.api.md @@ -11,7 +11,7 @@ import CBadge from '@coreui/vue/src/components/badge/CBadge' | Prop name | Description | Type | Values | Default | | -------------- | --------------------------------------------------------------------------------------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' | +| **as** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'span' | | **position** | Position badge in one of the corners of a link or button. | string | `'top-start'`, `'top-end'`, `'bottom-end'`, `'bottom-start'` | - | | **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | | **size** | Size the component small. | string | `'sm'` | - | diff --git a/packages/docs/api/button/CButton.api.md b/packages/docs/api/button/CButton.api.md index 8f8f11ee..47adf340 100644 --- a/packages/docs/api/button/CButton.api.md +++ b/packages/docs/api/button/CButton.api.md @@ -8,17 +8,17 @@ import CButton from '@coreui/vue/src/components/button/CButton' #### Props -| Prop name | Description | Type | Values | Default | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -| **active** | Toggle the active state for the component. | boolean | - | - | -| **color** | Sets the color context of the component to one of CoreUI’s themed colors. | string | `'primary'`, `'secondary'`, `'success'`, `'danger'`, `'warning'`, `'info'`, `'dark'`, `'light'` | - | -| **component** | Component used for the root node. Either a string to use a HTML element or a component. | string | - | 'button' | -| **disabled** | Toggle the disabled state for the component. | boolean | - | - | -| **href** | The href attribute specifies the URL of the page the link goes to. | string | - | - | -| **shape** | Select the shape of the component. | string | `'rounded'`, `'rounded-top'`, `'rounded-end'`, `'rounded-bottom'`, `'rounded-start'`, `'rounded-circle'`, `'rounded-pill'`, `'rounded-0'`, `'rounded-1'`, `'rounded-2'`, `'rounded-3'` | - | -| **size** | Size the component small or large. | string | `'sm'`, `'lg'` | - | -| **type** | Specifies the type of button. Always specify the type attribute for the `